js實現簡單易用的上下無縫滾動效果

時間 2019-11-17

原文原文鏈接

 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>一、dqx5***</p>
20         <p><span>領取了烈焰雙11禮包</span>二、s376***</p>
21         <p><span>領取了街機三國雙11禮包</span>三、sdk1***</p>
22         <p><span>領取了烈火戰神雙11禮包</span>四、說好〃不沋傷</p>
23         <p><span>領取了街機三國雙11禮包</span>五、說好〃不沋傷</p>
24         <p><span>領取了烈焰雙11禮包</span>六、gao6***</p>
25         <p><span>領取了街機三國雙11禮包</span>七、ando***</p>
26         <p><span>領取了街機三國雙11禮包</span>八、6813***</p>
27         <p><span>領取了烈焰雙11禮包</span>九、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便可解決。css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。