marquee实现滚动文字、跑马灯、动态文字效果-网站建设-菜鸟之家

首页网站建设正文

marquee实现滚动文字、跑马灯、动态文字效果

2012-04-19 650

不少朋友在浏览他人网页时，羡慕人家网站上的滚动文字效果，今天菜鸟之家_电脑爱好者将动态文字效果实现代码贴出来与各位朋友分享：

<marquee> 滚动文字 </marquee>

1）滚动方向：direction=”up/down/left/right”

2）滚动方式：behavior 三种方式scroll 循环滚动；slide 滚动一次后停止；alternate 交替滚动【默认为scroll循环滚动】

3）滚动速度：scrollamount=”10” 【值为10px，值越大，滚动越快。】

4）滚动延迟：scrolldelay=”500” 【值为500ms，即为0.5秒】

5）循环设置：loop=10 【滚动10次后结束，注意没有引号】

6）滚动文字背景：bgcolor=”#cccccc” 【#cccccc颜色值，请使用完整的16进制表示】

7）滚动背景面积：width=”350px” height=”200px” 【宽350px，高200px】

8）设置空白空间：hspace=”50” vspace=”20” 【滚动区周围的空间，水平方向50px，垂直方向20px；相当于CSS中的margin】

9）鼠标移动控制滚动开始和暂停：onmouseover=stop() 【鼠标移动到滚动内容上，滚动暂停】 onmouseout=start() 【鼠标移动出滚动内容，滚动继续】

10）注：滚动可以是一行，也可以是多行。可包括的html标签有<br> <h1> <p>等等。仍需特别注意的是有的长度属性值需要带上单位px，有的则不需要。

11）完整的实例：

<marquee direction="up" behavior="scroll" scrollamount="10" scrolldelay="666" loop=5 bgcolor="#dddddd" width="400px" height="200px" hspace="50" vspace="20" onmouseover=stop() onmouseout=start()>

这里是需要滚动的内容，可以是文字，也可以是图片。

</marquee>

将以上实例代码插到网页编码的<body>跟</body>之间，测试网页是不是看到滚动的文字效果了！

标签：
设计

发表评论：取消回复

上一篇>>使用精美图标丰富我们的网页设计

=========================================

下一篇>>非常经典的漂浮广告JS代码