demo:
var Mar=(function(Global){ var Marquee=function(id){ var content=document.getElementById(id), original=content.getElementsByTagName("li")[0], speed=arguments[1] || 10, clone=original.cloneNode(true); content.appendChild(clone); var scrolling=function(){ if(content.scrollTop==clone.offsetTop){ content.scrollTop=0; }else{ content.scrollTop++; } } var timer=setInterval(scrolling,speed); content.onmouseover=function(){clearInterval(timer);} content.onmouseout=function(){timer=setInterval(scrolling,speed);} } return { init:function(){ Global.addEventListener('load',function(){ Marquee('content'); },false) } } })(window)
html 布局：
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/demo.js"></script> </head> <body> <style type="text/css"> #content{position:relative;width:300px;height:150px;overflow:hidden;} #content li{list-style:none;} #content li a{display:block;} </style> <ul id="content"> <li> <a href="javascript:void(0);">Javascript Fundations</a> <a href="javascript:void(0);">Javascript Fundations</a> <a href="javascript:void(0);">Javascript Fundations</a> <a href="javascript:void(0);">Javascript Fundations</a> <a href="javascript:void(0);">Javascript Fundations</a> <a href="javascript:void(0);">Javascript Fundations</a> <a href="javascript:void(0);">Javascript Fundations</a> <a href="javascript:void(0);">Javascript Fundations</a> <a href="javascript:void(0);">Javascript Fundations</a> <a href="javascript:void(0);">Javascript Fundations</a> <a href="javascript:void(0);">Javascript Fundations</a> <a href="javascript:void(0);">Javascript Fundations</a> <a href="javascript:void(0);">Javascript Fundations</a> <a href="javascript:void(0);">Javascript Fundations</a> </li> </ul> </body> </html>