1、对于有缝的跑马灯效果可以使用<marquee>标签:
①direction:这个属性表示向那个方向滚动,参数:left、right、up、down
②scrollamount:这个属性表示滚动的速度
③behavior:这个属性表示滚动的方式,参数:scroll循环滚动、slide单次滚动、alternate交替滚动
④loop:这个属性表示滚动次数,默认-1无限滚动
⑤scrolldelay:这个属性表示每次滚动的时间间隔
⑥onmouseover:这个属性一般设置为this.stop()
⑦onmouseout:这个属性一般设置为this.start()
代码示例如下:
<div>
<marquee width="100px" height="44px" direction="up" scrollamount="3"
οnmοuseοver="this.stop()" οnmοuseοut="this.start()">
<a href="">test1</a><br>
<a href="">test2</a><br>
<a href="">test3</a><br>
<a href="">test4</a><br>
</marquee>
</div>
********************************************************************************************************************************************************************************************
2、对于无缝的跑马灯效果:
直接上代码:转载自:https://www.cnblogs.com/naokr/archive/2013/11/10/3416532.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
/**注意:最外层的高度必须小于等于要展示的数据的高度:蓝色部分为例:300<34*34所以合理*/
*{margin:0;padding:0}
#slide{position:absolute;height:300px;width:260px;color:#FA8E93;overflow:hidden;border:1px solid #ccc}
#slide p{height:34px;line-height:34px;overflow:hidden}
#slide span{float:right}
</style>
</head>
<body>
<div id="slide">
<div id="slide1">
<p><span>领取了烈焰双11礼包</span>1、dqx5***</p>
<p><span>领取了烈焰双11礼包</span>2、s376***</p>
<p><span>领取了街机三国双11礼包</span>3、sdk1***</p>
<p><span>领取了烈火战神双11礼包</span>4、说好〃不沋伤</p>
<p><span>领取了街机三国双11礼包</span>5、说好〃不沋伤</p>
<p><span>领取了烈焰双11礼包</span>6、gao6***</p>
<p><span>领取了街机三国双11礼包</span>7、ando***</p>
<p><span>领取了街机三国双11礼包</span>8、6813***</p>
<p><span>领取了烈焰双11礼包</span>9、lais***</p>
</div>
<div id=slide2></div>
</div>
<script>
var speed=40
var slide=document.getElementById("slide");
var slide2=document.getElementById("slide2");
var slide1=document.getElementById("slide1");
slide2.innerHTML=slide1.innerHTML//克隆,为了收尾能够无缝连接
function Marquee(){
if(slide.scrollTop>=slide1.offsetHeight)
slide.scrollTop=0;//slide1消失之后就用从0开始
else{
slide.scrollTop++;//一开始的时候是选执行这行代码,值从0开始到slide1全部结束
}
}
var MyMar=setInterval(Marquee,speed)
slide.οnmοuseοver=function(){clearInterval(MyMar)}
slide.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
3、使用liMarquee.js还实现无缝跑马灯效果:
直接上连接,自己下代码看:http://www.dowebok.com/demo/188/index4.html