CSS中滚动效果<MARQUEE>的用法

最新推荐文章于 2024-06-19 14:56:38 发布

xiaokangmiclong

最新推荐文章于 2024-06-19 14:56:38 发布

阅读量5.5k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/xiaokangmiclong/article/details/50114445

版权

CSS 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

<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>