<marquee align="left" height="36" width="auto" behavior="scroll" direction="left" hspace="10" vspace="0"
loop="-1" scrollamount="10" scrolldelay="200"
onMouseOut="this.start()" onMouseOver="this.stop()">
<a href="http://www.baidu.com">这里是动态新闻1。。。。。</a>
<a href="http://www.baidu.com">这里是动态新闻2。。。。。</a>
<a href="http://www.baidu.com">这里是动态新闻3。。。。。</a>
<ul>
</marquee>
下面来看看它的属性分别的作用是什么:
behavior 设定滚动的方式:
alternate: 表示在两端之间来回滚动。
scroll: 表示由一端滚动到另一端,会重复。
slide: 表示由一端滚动到另一端,不会重复。
direction 设定活动字幕的滚动方向:
direction="down":向下
direction="left":向左
direction="right":向右
direction="up":向上
hspace 设定活动字幕里所在的位置距离父容器水平边框的距离 :
horizontal(水平)space
vspace 设定活动字幕里所在的位置距离父容器垂直边框的距离 :
vertical(垂直) space
loop 设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1 :
loop="-1"
loop="2" ,只走两次
scrollamount 设定活动字幕的滚动速度,单位pixels :
scrollamount="10"
scrolldelay 设定活动字幕滚动两次之间的延迟时间,单位millisecond(毫秒):
值大了会有一步一停顿的效果,scrolldelay="1000"停顿一秒
例子:marquee实现无缝滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script>
function scroll(obj) {
var tmp = (obj.scrollLeft)++; //当滚动条到达右边顶端时
if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML; //当滚动条滚动了初始内容的宽度时滚动条回到最左端
if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0;
}
var a = setInterval("scroll(document.getElementById('scrollobj'))",20);
function aa(){
clearInterval(a);
}
function b(){
a=setInterval("scroll(document.getElementById('scrollobj'))",100);
}
</script>
<body>
<MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100">
</MARQUEE>
<DIV id="scrollobj" style="white-space:nowrap;overflow:hidden;width:500px;" οnmοuseοver="aa()" οnmοuseοut="b()" >
111111
22222
33333
44444
55555
</body>
</html>