Javascript无缝滚动效果如下图:
测试环境(成功):
IE9,IE11,chrome
代码如下:
js部分:
var speed = 40; window.οnlοad=function(){ var demo=document.getElementById("demo"); var demo2=document.getElementById("demo2"); var demo1=document.getElementById("demo1"); demo2.innerHTML = demo1.innerHTML; function Marquee(){if(demo.scrollTop>=demo1.offsetHeight){ demo.scrollTop=0; } else{ demo.scrollTop=demo.scrollTop+1; } } var MyMar=setInterval(Marquee,speed); demo.οnmοuseοver=function(){clearInterval(MyMar)}; demo.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed); }; }
css部分:
body{font-size:12px;margin:0;padding:0;} #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:relative;border:1px solid #000;} #demo1{height:auto; text-align:left;} #demo2{height:auto; text-align:left;} ul{margin:0;padding:0} #demo1 li, #demo2 li{list-style-type:none; height:22px; text-align:left;}
html部分:
<div id="demo"> <div id="demo1"> <ul> <li><a href="#" target="_blank">错误纸标欢迎您的到来</a></li> <li><a href="#" target="_blank">只有努力才会有美好的明天</a></li> <li><a href="#" target="_blank">没有人一开始就是高手,都是从菜鸟开始</a></li> <li><a href="#" target="_blank">每一天都是新的需要好好珍惜</a></li> <li><a href="#" target="_blank">怨天尤人是没有任何作用的</a></li> <li><a href="#" target="_blank">今天你写代码了吗</a></li> <li><a href="#" target="_blank">分享的胸怀和互助的精神最终成就了你</a></li> </ul> </div> <div id="demo2"></div> </div>