JavaScript抖動的實現(xiàn)

maybe_009 發(fā)布于2019-08-23 11:01 / 3146人閱讀

摘要：實現(xiàn)原理抖動的實現(xiàn)原理其實就是讓節(jié)點元素進行位置的偏移，所以在實現(xiàn)此功能的時候最好節(jié)點元素進行絕對定位，然后來修改它們的和值。定時器時間決定了節(jié)點抖動的速度。

實現(xiàn)原理

抖動的實現(xiàn)原理其實就是讓節(jié)點元素進行位置的偏移，所以在實現(xiàn)此功能的時候最好節(jié)點元素進行絕對定位，然后來修改它們的top和left值。
這里有幾個要點，第一是要準(zhǔn)備好需要偏移的頻率，這個可以通過把偏移距離放到數(shù)組中來控制偏移距離，偏移距離跳動幅度越小，效果就越平穩(wěn)。定時器時間決定了節(jié)點抖動的速度。

代碼如下：




    
    
    Made with Thimble

GPU云服務(wù)器云服務(wù)器 javascript實現(xiàn) javascript實現(xiàn)動畫 javascript實現(xiàn)隊列 javascript實現(xiàn)方法

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

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

相關(guān)文章

JavaScript 五十問——認(rèn)真聊一聊去抖與節(jié)流

摘要：前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題?？偟膩碚f，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔而去抖動會指定事件不觸發(fā)的時間間隔。前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題?？偟膩碚f，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔；而去抖動會指定事件不觸發(fā)的時間間隔...

chadLi 2019-08-02 14:05 評論0 收藏0
JavaScript 五十問——認(rèn)真聊一聊去抖與節(jié)流

摘要：前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題?？偟膩碚f，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔而去抖動會指定事件不觸發(fā)的時間間隔。前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題?？偟膩碚f，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔；而去抖動會指定事件不觸發(fā)的時間間隔...

EscapedDog 2019-08-23 14:38 評論0 收藏0
小白圖解防抖動與節(jié)流-Javascript篇

摘要：防抖動與節(jié)流點擊查看源碼防抖動默認(rèn)不立即觸發(fā)保存作用域保存參數(shù)初始化清空所有定時器如果是立即觸發(fā)為空時觸發(fā)操作時間后置空時間后觸發(fā)操作防抖動立即觸發(fā)防抖動節(jié)流默認(rèn)立即觸發(fā)保存作用域保存參數(shù)為空時立即觸發(fā)時間后觸發(fā)操作節(jié)流立即觸發(fā)節(jié)流總結(jié) 防抖動與節(jié)流點擊查看源碼防抖動 var debounce = function (fn, delay, isImmediate) { v...

DevTTL 2019-08-23 12:34 評論0 收藏0
用 ES6 寫全屏滾動插件

摘要：這篇文章將介紹如何使用原生主要使用語法實現(xiàn)全屏滾動插件，兼容手機觸屏，觸摸板優(yōu)化，支持自定義頁面動畫，壓縮后文件只有。這篇文章將介紹如何使用原生 JS （主要使用 ES6 語法）實現(xiàn)全屏滾動插件，兼容 IE 10+、手機觸屏，Mac 觸摸板優(yōu)化，支持自定義頁面動畫，壓縮后 gzip 文件只有 2.15KB。完整源碼在這 pure-full-page，點這查看 demo。 1）前面的話...

liuchengxu 2019-08-26 11:52 評論0 收藏0
Issues with position fixed & scroll（移動端 fixed

摘要：同時，請在其他移動端瀏覽器也這么處理，不要只對蘋果做這些處理。蘋果對于虎頭蛇尾的做法真讓人頭疼，這作風(fēng)跟巨硬真像。轉(zhuǎn)載請注明英文原文及譯文出處原文地址：Issues with position fixed & scrolling on iOS 原文作者：Remy Sharp譯文地址：移動端 fixed 和 scroll 問題譯文作者：鎏金圣手火麒麟最近在做iOS端的H5頁面...

Jiavan 2019-08-21 17:00 評論0 收藏0