公司做个页面效果，文字向上滚动，需要循环，鼠标移上去，清除定时器停止运动，鼠标移除，运动继续。
之前一般在17素材网找类似的效果进行修改，总觉得没意思，自己写一个吧，
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="智能社 - zhinengshe.com" /> <meta name="copyright" content="智能社 - zhinengshe.com" /> <title>智能社 - www.zhinengshe.com</title> <style> *{ margin: 0; padding: 0;} ul,li{list-style: none;} #div1{ position:relative; 100px; height: 145px; margin: 100px auto; border: 1px solid red; overflow: hidden; } #ul{ position:absolute; left:0; top:0; } #div1 li{ height: 24px; line-height: 24px; 100px; text-align: center; cursor: pointer; } #div1 li:hover{ background: green; } </style> <script> window.onload=function(){ var oDiv = document.getElementById('div1'); var oUl = oDiv.children[0]; var aLi = oUl.children; timer =null; oUl.innerHTML += oUl.innerHTML; var len = aLi.length; oUl.style.height = aLi[0].offsetHeight * len +'px'; h = oUl.offsetHeight/2; var top=0; clearInterval(timer); var timer =setInterval(next,300); for(var i=0; i<len;i++){ aLi[i].onmouseover=function(){ clearInterval(timer); } aLi[i].onmouseout=function(){ timer =setInterval(next,300); } } function next(){ top += -10; document.title = top; //oUl.style.top = (top%h-h)%h + "px"; //向下滚动时top += 10; oUl.style.top = top%h + "px"; } }; </script> </head> <body> <div id="div1"> <ul id="ul"> <li style="background:red;">我是li1</li> <li>我是li2</li> <li>我是li3</li> <li>我是li4</li> <li>我是li5</li> <li>我是li6</li> </ul> </div> </body> </html>
其实和图片左右无缝滚动的效果一直，没事可以研究下。。。。。。。。。。。。。。