当前位置:首页 > 代码 > 正文

网页图片走马灯代码(简单网页跑马灯代码)

admin 发布:2022-12-20 00:06 187


本篇文章给大家谈谈网页图片走马灯代码,以及简单网页跑马灯代码对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

要达到这种走马灯效果,得用什么代码

DELPHI的源码,用了字符复制函数,与册除字符函数。。。原理简单。

procedure TForm1.FormCreate(Sender: TObject);

begin

s:= 'TEST ';

end;

procedure TForm1.Timer1Timer(Sender: TObject);

begin

s:=s+copy(s,1,1);

delete(s,1,1);

label1.Caption:=s;

Label1.Refresh;

end;

dreamweaver网页制作中,怎样实现图片的走马灯效果

打开 Dreamweaver

新建 HTML 文档;

修改标题为"跑马灯"

保存为 index.html 文件。

首先,编写跑马灯部分的静态 HTML 代码,把图片排列起来

在 body 和 /body 标签中添加以下代码:

div

 ul

liimg src="img/1.jpg" //li

liimg src="img/2.jpg" //li

liimg src="img/3.jpg" //li

liimg src="img/4.jpg" //li

liimg src="img/5.jpg" //li

liimg src="img/6.jpg" //li

liimg src="img/7.jpg" //li

 /ul

/div

给上一步的 HTML 代码中的 div 标签增加 class 属性,如下:

 div class="con"

编写跑马灯部分的 CSS 样式代码,代码放在 head 和 /head 标签中,如下:

style type="text/css"

 ul{list-style:none; padding:0; margin:0;}

 .con{ width:1105px; height:225px; overflow:hidden; border:2px solid #666; margin:10px auto 0 auto; padding:5px 0 0 5px;}

 .con ul li{ float:left; margin:0 5px 10px 0;}

 .con ul li img{ display:block; width:209px; height:209px; padding:2px; border:1px solid #ccc;}

/style

引入 JQuery 库

 script type="text/javascript" src="jquery-1.11.0.min.js"/script

引入 Marquee 插件

 script type="text/javascript" src="marquee2.js"/script

代码放在 /body 标签前,如图:

给 div 增加 marquee 类

 div class="con marquee"

保存文件,在浏览器中打开,就可以看到图片开始滚动了。

图片默认的滚动方向是“向上滚动”

如果要修改图片滚动的方向,可以给 div 指定 direction 属性,属性值可以取:

 up 上

 down 下

 left 左

 right 右

网页图片跑马灯效果代码

跑马灯大全

海波吧

!--

Begin

var

Mes=new

Array();

Mes[0]="海波吧欢迎你";

Mes[1]="感谢你关注海波吧";

Mes[2]="网页制作技巧之跑马灯大全

";

var

place=1;

var

i=0;

function

scroll()

{

window.status=Mes[i].substring(0,

place);

if

(place

=

Mes[i].length)

{

if(i2)

{

i++;

place=1;

window.setTimeout("scroll()",50);

}

else

{

i=0;

place=1;

window.setTimeout("scroll()",50);

}

}

else

{

place++;

window.setTimeout("scroll()",50);

}

}

//

End

--

滚动的文字

表示双向移动

表示运动方向向左

弹来弹去跑马灯!

表示运动方向向左

target=_blank带有超链接的跑马灯!点点看

target=_blank还有一条!点点看

参数

用法介绍

behavior=scroll,

slide,

alternate

跑马方式:循环绕行,只跑一次就停住,来回往复运动

direction=left,right

跑马方向:从左向右,从右向左

loop=100

跑马次数:循环100次,如不写默认为一直循环

width=100%,height=200

跑马范围:宽为100%,高为200像素

scrollamount=20

跑马速度:数越大越快

scrolldelay=500

跑马延时:毫秒数,利用它可实现跃进式滚动

hspace=20,vspace=20

跑马区域与其它区域间的空白大小

bgcolor=#00FFCC

跑马区域的背景颜色

关于网页图片走马灯代码和简单网页跑马灯代码的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;

本文地址:http://ahzz.com.cn/post/31570.html


取消回复欢迎 发表评论:

分享到

温馨提示

下载成功了么?或者链接失效了?

联系我们反馈

立即下载