<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js无缝滚动制作</title> </head> <body> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;font-size:12px;} a,img{border:0;} .scroll{height:300px;width:500px;} .scroll p{line-height:20px;padding:5px 0;} .scroll p a{color:#3366cc;text-decoration:none;} </style> <script type="text/javascript"> function addEventSimple(obj,evt,fn){ if(obj.addEventListener){ obj.addEventListener(evt,fn,false); }else if(obj.attachEvent){ obj.attachEvent('on'+evt,fn); } } addEventSimple(window,'load',initScrolling); var scrollingBox; var scrollingInterval; var reachedBottom=false; var bottom; function initScrolling(){ scrollingBox = document.getElementById('xst'); scrollingBox.style.overflow = "hidden"; scrollingInterval = setInterval("scrolling()",50); scrollingBox.onmouseover = over; scrollingBox.onmouseout = out; } function scrolling(){ var origin = scrollingBox.scrollTop++; if(origin == scrollingBox.scrollTop){ if(!reachedBottom){ scrollingBox.innerHTML+=scrollingBox.innerHTML; reachedBottom=true; bottom=origin; }else{ scrollingBox.scrollTop=bottom; } } } function over(){ clearInterval(scrollingInterval); } function out(){ scrollingInterval = setInterval("scrolling()",50); } </script> <div class="scroll" id="xst"> <p><a href="#">skksdghkdhgbkjdgbk</a></p> <p><a href="#">11111111111111111111111111111</a></p> <p><a href="#">11111111111111111111111111111</a></p> <p><a href="#">skksdghkdhgbkjdgbk</a></p> <p><a href="#">11111111111111111111111111111</a></p> <p><a href="#">11111111111111111111111111111</a></p> <p><a href="#">skksdghkdhgbkjdgbk</a></p> <p><a href="#">11111111111111111111111111111</a></p> <p><a href="#">skksdghkdhgbkjdgbk</a></p> </div> </body>