js实现简单易用的上下无缝滚动效果 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <meta name="description" content="">
 7 <meta name="keywords" content="">
 8 <style>
 9 *{margin:0;padding:0}
10 #slide{position:absolute;height:300px;width:260px;color:#FA8E93;overflow:hidden;border:1px solid #ccc}
11 #slide p{height:34px;line-height:34px;overflow:hidden}
12 #slide span{float:right}
13 </style>
14 </head>
15 <body>
16 
17 <div id="slide">
18     <div id="slide1"> 
19         <p><span>领取了烈焰双11礼包</span>1、dqx5***</p>
20         <p><span>领取了烈焰双11礼包</span>2、s376***</p>
21         <p><span>领取了街机三国双11礼包</span>3、sdk1***</p>
22         <p><span>领取了烈火战神双11礼包</span>4、说好〃不沋伤</p>
23         <p><span>领取了街机三国双11礼包</span>5、说好〃不沋伤</p>
24         <p><span>领取了烈焰双11礼包</span>6、gao6***</p>
25         <p><span>领取了街机三国双11礼包</span>7、ando***</p>
26         <p><span>领取了街机三国双11礼包</span>8、6813***</p>
27         <p><span>领取了烈焰双11礼包</span>9、lais***</p>
28     </div>
29     <div id=slide2></div>
30 </div>
31 
32 <script>
33     var speed=40
34     var slide=document.getElementById("slide");
35     var slide2=document.getElementById("slide2");
36     var slide1=document.getElementById("slide1");
37     slide2.innerHTML=slide1.innerHTML
38     function Marquee(){
39         if(slide2.offsetTop-slide.scrollTop<=0)
40             slide.scrollTop-=slide1.offsetHeight
41         else{
42             slide.scrollTop++
43         }
44     }
45     var MyMar=setInterval(Marquee,speed)
46     slide.onmouseover=function(){clearInterval(MyMar)}
47     slide.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
48 </script>
49 
50 </body>
51 </html>

js实现上下无缝滚动效果，代码很简洁。不过css样式上有个需要注意的地方，#slide{position:absolute}。测试发现如果盒子#slide上面还有很多内容的话，滚动效果只会持续一次，不会连续。盒子#slide加上样式position:absolute即可解决。

posted on 2013-11-10 12:25  Cosimo  阅读(19294)  评论(0)  编辑  收藏  举报

导航