1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <meta name="description" content=""> 7 <meta name="keywords" content=""> 8 <style> 9 *{margin:0;padding:0} 10 #slide{position:absolute;height:300px;width:260px;color:#FA8E93;overflow:hidden;border:1px solid #ccc} 11 #slide p{height:34px;line-height:34px;overflow:hidden} 12 #slide span{float:right} 13 </style> 14 </head> 15 <body> 16 17 <div id="slide"> 18 <div id="slide1"> 19 <p><span>领取了烈焰双11礼包</span>1、dqx5***</p> 20 <p><span>领取了烈焰双11礼包</span>2、s376***</p> 21 <p><span>领取了街机三国双11礼包</span>3、sdk1***</p> 22 <p><span>领取了烈火战神双11礼包</span>4、说好〃不沋伤</p> 23 <p><span>领取了街机三国双11礼包</span>5、说好〃不沋伤</p> 24 <p><span>领取了烈焰双11礼包</span>6、gao6***</p> 25 <p><span>领取了街机三国双11礼包</span>7、ando***</p> 26 <p><span>领取了街机三国双11礼包</span>8、6813***</p> 27 <p><span>领取了烈焰双11礼包</span>9、lais***</p> 28 </div> 29 <div id=slide2></div> 30 </div> 31 32 <script> 33 var speed=40 34 var slide=document.getElementById("slide"); 35 var slide2=document.getElementById("slide2"); 36 var slide1=document.getElementById("slide1"); 37 slide2.innerHTML=slide1.innerHTML 38 function Marquee(){ 39 if(slide2.offsetTop-slide.scrollTop<=0) 40 slide.scrollTop-=slide1.offsetHeight 41 else{ 42 slide.scrollTop++ 43 } 44 } 45 var MyMar=setInterval(Marquee,speed) 46 slide.onmouseover=function(){clearInterval(MyMar)} 47 slide.onmouseout=function(){MyMar=setInterval(Marquee,speed)} 48 </script> 49 50 </body> 51 </html>
js实现上下无缝滚动效果，代码很简洁。不过css样式上有个需要注意的地方，#slide{position:absolute}。测试发现如果盒子#slide上面还有很多内容的话，滚动效果只会持续一次，不会连续。盒子#slide加上样式position:absolute即可解决。