1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>js实现无缝滚动</title>
5 </head>
6 <body>
7 <div id="demo" style="overflow:hidden;height:200px;width:300px; border:1px solid #222">
8 <div id="demo1">
9 <!--此处放要显示的内容-->
10
11 <p>hello</p>
12 <p>nice to meet you </p>
13 <p>how are you ?</p>
14 <p>fine 3q and you?</p>
15 <p>i'm fine too,thanks!</p>
16 <p>$#@%$%$</p>
17 <p>你好</p>
18 <p>啦啦啦</p>
19
20 </div>
21 <div id="demo2"></div>
22 </div>
23 <script language="javascript">
24 var speed=30;
25 var demo2=document.getElementById("demo2");
26 var demo1=document.getElementById("demo1");
27 var demo=document.getElementById("demo");
28 demo2.innerHTML=demo1.innerHTML;
29 function Marquee(){
30 if(demo2.offsetTop-demo.scrollTop<=0){
31 demo.scrollTop-=demo1.offsetHeight;
32 }
33 else{
34 demo.scrollTop++;
35 }
36 }
37 var MyMar=setInterval(Marquee,speed);
38 demo.onmouseover=function() {clearInterval(MyMar)};
39 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
40 </script>
41 </body>
42 </html>
