javascript定時器實現(xiàn)無縫滾動效果

RyanHoo 發(fā)布于2019-08-26 12:12 / 2687人閱讀

摘要：最近學(xué)習(xí)定時器的相關(guān)知識，整理定時器實現(xiàn)無縫滾動的效果。當(dāng)滾動超過總長度的二分之一時即，將切換到向左滾動。

最近學(xué)習(xí)定時器的相關(guān)知識，整理定時器實現(xiàn)無縫滾動的效果。

原理

用定時器實現(xiàn)ul滾動。

當(dāng)滾動超過ul總長度的二分之一時（即oUl.offsetLeft<-oUl.offsetWidth/2），將left切換到0（向左滾動）。

當(dāng)ul左邊距離大于0的時候，將left切換到總長度的一般（即oUl.style.left=-oUl.offsetWidth/2+"px"）。

向左滾動的時候-2

向右滾動的時候+2

代碼實現(xiàn)




  
  定時器實現(xiàn)無縫滾動例子




  向左滾動
  向右滾動

GPU云服務(wù)器云服務(wù)器 javascript無縫滾動無縫滾動水平無縫滾動文字無縫滾動

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108236.html

相關(guān)文章

原生javascript實現(xiàn)無縫滾動

摘要：實現(xiàn)的無縫滾動需要掌握基本的定位和運動知識逐步分析圖片的無縫滾動是怎么實現(xiàn)的的基本結(jié)構(gòu)如下樣式要實現(xiàn)圖片窗口整體的無縫滾動我們需要通過定時器定時改變的位置，于是我們有下面的片段來實現(xiàn)對應(yīng)定時器時間段內(nèi)移動的距離，指開始這樣做能實現(xiàn)基本實現(xiàn)javascript的無縫滾動需要掌握基本的定位和運動知識逐步分析圖片的無縫滾動是怎么實現(xiàn)的HTML的基本結(jié)構(gòu)如下 ...

VPointer 2019-08-22 11:11 評論0 收藏0
vue無縫滾動的插件開發(fā)填坑分享

摘要：寫插件的初衷項目經(jīng)常需要無縫滾動效果，當(dāng)時寫的時候用用這個老插件，相對不上很好用。后來轉(zhuǎn)向在沒有找到好的無縫滾動插件，除了配置可以實現(xiàn)但是相對來說太重了，于是自己造了個輪子。寫插件的初衷 1.項目經(jīng)常需要無縫滾動效果，當(dāng)時寫jq的時候用用msClass這個老插件，相對不上很好用。2.后來轉(zhuǎn)向vue在vue-awesome沒有找到好的無縫滾動插件，除了配置swiper可以實現(xiàn)但是相對來...

岳光 2019-08-22 14:04 評論0 收藏0
javascript簡單輪播圖

摘要：輪播圖實現(xiàn)原理通過多張圖片平鋪，用只顯示一張圖片其他的隱藏，無縫滾動用定時器改變元素的值讓圖片呈現(xiàn)左右滾動的效果。 **輪播圖實現(xiàn)原理：通過多張圖片平鋪，用overflow:hidden只顯示一張圖片、其他的隱藏，無縫滾動用定時器改變元素的left值讓圖片呈現(xiàn)左右滾動的效果。**showImg(https://segmentfault.com/img/bVXlfS?w=800&h...

lk20150415 2019-08-02 15:58 評論0 收藏0
javascript簡單輪播圖

摘要：輪播圖實現(xiàn)原理通過多張圖片平鋪，用只顯示一張圖片其他的隱藏，無縫滾動用定時器改變元素的值讓圖片呈現(xiàn)左右滾動的效果。 **輪播圖實現(xiàn)原理：通過多張圖片平鋪，用overflow:hidden只顯示一張圖片、其他的隱藏，無縫滾動用定時器改變元素的left值讓圖片呈現(xiàn)左右滾動的效果。**showImg(https://segmentfault.com/img/bVXlfS?w=800&h...

peixn 2019-08-21 17:48 評論0 收藏0
javascript簡單輪播圖

摘要：輪播圖實現(xiàn)原理通過多張圖片平鋪，用只顯示一張圖片其他的隱藏，無縫滾動用定時器改變元素的值讓圖片呈現(xiàn)左右滾動的效果。 **輪播圖實現(xiàn)原理：通過多張圖片平鋪，用overflow:hidden只顯示一張圖片、其他的隱藏，無縫滾動用定時器改變元素的left值讓圖片呈現(xiàn)左右滾動的效果。**showImg(https://segmentfault.com/img/bVXlfS?w=800&h...

liuhh 2019-08-29 13:53 評論0 收藏0