JavaScript實現(xiàn)窗口抖動效果
原理介紹
抖動其實是往復(fù)運動的一種特殊形式,只不過往復(fù)運動是一種無摩擦力的無限運動,且以速度為參照依據(jù);而抖動以位置作為參照依據(jù),最終停在起始點
在網(wǎng)頁中最常見的一種抖動效果應(yīng)該是窗口抖動提示了
抖動元素從起始點開始,先向右移動最大距離len,然后移動到對稱的左邊位置;然后再向右移動稍微小一點的距離,再移動到對稱的左邊位置;以此循環(huán),最終元素停止在起始點
代碼實現(xiàn)
抖動在代碼實現(xiàn)上,無非就是通過定時器,每隔一段時間讓left或top值進(jìn)行變化
在運動實現(xiàn)中,有兩種距離變化的思路
思路一
div.style.left = div.offsetLeft + value;
每次都獲取元素的當(dāng)前樣式,再與變化的value值進(jìn)行運算
思路二
left = div.offsetLeft; ...... div.style.left = left + value;
在定時器開啟之前,獲取元素的初始樣式,再與變化的value值進(jìn)行運算
從抖動實現(xiàn)上來說,使用第二種方法,把距離變化完全交給value值變化來實現(xiàn)較為簡單
所以,代碼實現(xiàn)的關(guān)鍵就是了解value是如何變化的
假設(shè)最遠(yuǎn)距離為目標(biāo)target,同方向的距離間隔為步長step。如果用數(shù)字更直觀的表示,value的值類似于4、-4、2、-2、0。所以還需要一個變量dir來控制起始抖動方向,定時器每運動一次都要對dir進(jìn)行更改
//定時器開啟前的變量聲明 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){ //聲明要進(jìn)行抖動的元素 var obj = json.obj; //聲明元素抖動的最遠(yuǎn)距離 var target = json.target; //默認(rèn)值為20 target = Number(target) || 20; //聲明元素的變化樣式 var attr = json.attr; //默認(rèn)為'left' attr = attr || 'left'; //聲明元素的起始抖動方向 var dir = json.dir; //默認(rèn)為'1',表示開始先向右抖動 dir = Number(dir) || '1'; //聲明元素每次抖動的變化幅度 var stepValue = json.stepValue; stepValue = Number(stepValue) || 2; //聲明回調(diào)函數(shù) var fn = json.fn; //聲明步長step var step = 0; //保存樣式初始值 var attrValue = parseFloat(getCSS(obj,attr)); //聲明參照值value var value; //清除定時器 if(obj.timer){return;} //開啟定時器 obj.timer = setInterval(function(){ //抖動核心代碼 value = dir*(target - step); //當(dāng)步長值大于等于最大距離值target時 if(step >= target){ step = target } //更新樣式值 obj.style[attr] = attrValue + value + 'px'; //當(dāng)元素到達(dá)起始點時,停止定時器 if(step == target){ clearInterval(obj.timer); obj.timer = 0; //設(shè)置回調(diào)函數(shù) fn && fn.call(obj); } //如果此時為反向運動,則步長值變化 if(dir === -1){ step = step + stepValue; } //改變方向 dir = -dir; },50); }
實例應(yīng)用
下面利用封裝的shakeMove來實現(xiàn)一些簡單的抖動應(yīng)用
<!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實現(xiàn)窗口抖動效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
javascript限制文本框只允許輸入數(shù)字(曾經(jīng)與現(xiàn)在的方法對比)
很多時候需要用到限制文本框的數(shù)字輸入,試過許多方法,都不太理想,遂決定自己實現(xiàn)一個來玩玩,接下來介紹曾經(jīng)使用過的方法與自定義方法的對比,感興趣的朋友可以了解下啊2013-01-01javascript仿php的print_r函數(shù)輸出json數(shù)據(jù)
輸出json數(shù)據(jù),php的print_r函數(shù)可以輕松實現(xiàn),下面為大家介紹下javascript也可以模仿print_r函數(shù)輸出json數(shù)據(jù),具體實現(xiàn)如下,感興趣的朋友可以了解下2013-09-09es6 for循環(huán)中l(wèi)et和var區(qū)別詳解
這篇文章主要介紹了es6 for循環(huán)中l(wèi)et和var區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01JS+CSS實現(xiàn)的漂亮漸變背景特效代碼(6個漸變效果)
這篇文章主要介紹了JS+CSS實現(xiàn)的漂亮漸變背景特效代碼,包含6個漸變效果,涉及JavaScript針對頁面元素屬性動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-03-03