JS實現無縫滾動上
阿新 • • 發佈:2018-12-22
2018.03.22 17:19 字數 116 閱讀 98評論 1喜歡 1
首先上一張效果圖
原理
圖1
圖2
在可視區域內,list1向上滾動,在滾動至圖2的位置時,達到滾動連線臨界點。由於list2與list1的資料一模一樣,視覺上達到了一個無縫銜接的效果。此時讓滾動位置迅速歸0,list1回到初始位置,如圖1,實現無縫滾動。
程式碼
//html程式碼 <div id="box"> <ul id="list1"> <li>星期一</li> <li>星期二</li> <li>星期三</li> <li>星期四</li> <li>星期五</li> <li>星期六</li> <li>星期天</li> </ul> <ul id="list2"></ul> </div>
//js <script type="text/javascript"> var box=document.getElementById("box"); var l1=document.getElementById("list1"); var l2=document.getElementById("list2"); l2.innerHTML=l1.innerHTML;//克隆list1的資料,使得list2和list1的資料一樣 function scrollup(){ if(box.scrollTop>=l1.offsetHeight){ //滾動條距離頂部的值恰好等於list1的高度時,達到滾動臨界點,此時將讓scrollTop=0,讓list1回到初始位置,實現無縫滾動 box.scrollTop=0; }else{ box.scrollTop++; } } var scrollMove=setInterval(scrollup,30);//數值越大,滾動速度越慢 //滑鼠經過時,滾動停止 box.onmouseover=function(){ clearInterval(scrollMove) } //滑鼠離開時,滾動繼續 box.onmouseout=function(){ scrollMove=setInterval(scrollup,30); } </script>
//css
<style>
*{margin:0; padding:0;}
ul,li{list-style: none;}
#box{ width: 200px; height:90px; overflow:hidden; border:1px solid red;}
</style>
js無縫滾動到此完成!