首頁 > 開發者 > JavaScript
原理介紹
抖動其實是往複運動的一種特殊形式，只不過往複運動是一種無摩擦力的無限運動，且以速度為參照依據；而抖動以位置作為參照依據，最終停在起始點
在網頁中最常見的一種抖動效果應該是視窗抖動提示了
抖動元素從起始點開始，先向右移動最大距離len，然後移動到對稱的左邊位置；然後再向右移動稍微小一點的距離，再移動到對稱的左邊位置；以此迴圈，最終元素停止在起始點
代碼實現
抖動在代碼實現上，無非就是通過定時器，每隔一段時間讓left或top值進行變化
在運動實現中，有兩種距離變化的思路
思路一
div.style.left = div.offsetLeft + value;
每次都擷取元素的當前樣式，再與變化的value值進行運算
思路二
left = div.offsetLeft;......div.style.left = left + value;
在定時器開啟之前，擷取元素的初始樣式，再與變化的value值進行運算
從抖動實現上來說，使用第二種方法，把距離變化完全交給value值變化來實現較為簡單
所以，代碼實現的關鍵就是瞭解value是如何變化的
假設最遠距離為目標target，同方向的距離間隔為步長step。如果用數字更直觀的表示，value的值類似於4、-4、2、-2、0。所以還需要一個變數dir來控制起始抖動方向，定時器每運動一次都要對dir變更
//定時器開啟前的變數聲明dir = 1;step = 0;left = div.offsetLeft//定時器裡面的代碼value = dir*(target - step);if(step >= target){step = target}div.style.left = left + value + 'px';if(dir === -1){step++; }dir = -dir;
將抖動效果封裝為shakeMove.js
function getCSS(obj,style){if(window.getComputedStyle){return getComputedStyle(obj)[style];}return obj.currentStyle[style];} function shakeMove(json){//聲明要進行抖動的元素var obj = json.obj;//聲明元素抖動的最遠距離var target = json.target;//預設值為20target = Number(target) || 20;//聲明元素的變化樣式var attr = json.attr;//預設為'left' attr = attr || 'left'; //聲明元素的起始抖動方向var dir = json.dir;//預設為'1'，表示開始先向右抖動dir = Number(dir) || '1';//聲明元素每次抖動的變化幅度var stepValue = json.stepValue;stepValue = Number(stepValue) || 2;//聲明回呼函數 var fn = json.fn;//聲明步長stepvar step = 0;//儲存樣式初始值var attrValue = parseFloat(getCSS(obj,attr));//聲明參照值valuevar value;//清除定時器if(obj.timer){return;}//開啟定時器obj.timer = setInterval(function(){//抖動核心代碼value = dir*(target - step);//當步長值大於等於最大距離值target時if(step >= target){step = target}//更新樣式值obj.style[attr] = attrValue + value + 'px';//當元素到達起始點時，停止定時器if(step == target){clearInterval(obj.timer);obj.timer = 0;//設定回呼函數fn && fn.call(obj); } //如果此時為反向運動，則步長值變化if(dir === -1){step = step + stepValue; }//改變方向dir = -dir; },50); }
執行個體應用
下面利用封裝的shakeMove來實現一些簡單的抖動應用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.test{height: 50px;width: 50px;position: absolute;top: 50px;} </style></head><body><div id="box"><div class="test" style="left:10px;background:lightblue"></div><div class="test" style="left:70px;background:lightgreen"></div><div class="test" style="left:130px;background:pink"></div><div class="test" style="left:190px;background:lightcoral"></div><div class="test" style="left:250px;background:orange"></div></div><script src="http://files.cnblogs.com/files/xiaohuochai/shakeMove.js"></script><script>var aDiv = box.getElementsByTagName('div');for(var i = 0; i < aDiv.length; i++){aDiv[i].onmouseover = function(){shakeMove({obj:this,attr:'top'});}}</script></body></html>
以上所述是小編給大家介紹的JavaScript實現視窗抖動效果，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
