JavaScript實(shí)現(xiàn)窗口抖動(dòng)效果
原理介紹
抖動(dòng)其實(shí)是往復(fù)運(yùn)動(dòng)的一種特殊形式，只不過往復(fù)運(yùn)動(dòng)是一種無摩擦力的無限運(yùn)動(dòng)，且以速度為參照依據(jù)；而抖動(dòng)以位置作為參照依據(jù)，最終停在起始點(diǎn)
在網(wǎng)頁中最常見的一種抖動(dòng)效果應(yīng)該是窗口抖動(dòng)提示了
抖動(dòng)元素從起始點(diǎn)開始，先向右移動(dòng)最大距離len，然后移動(dòng)到對(duì)稱的左邊位置；然后再向右移動(dòng)稍微小一點(diǎn)的距離，再移動(dòng)到對(duì)稱的左邊位置；以此循環(huán)，最終元素停止在起始點(diǎn)
代碼實(shí)現(xiàn)
抖動(dòng)在代碼實(shí)現(xiàn)上，無非就是通過定時(shí)器，每隔一段時(shí)間讓left或top值進(jìn)行變化
在運(yùn)動(dòng)實(shí)現(xiàn)中，有兩種距離變化的思路
思路一
div.style.left = div.offsetLeft + value;
每次都獲取元素的當(dāng)前樣式，再與變化的value值進(jìn)行運(yùn)算
思路二
left = div.offsetLeft; ...... div.style.left = left + value;
在定時(shí)器開啟之前，獲取元素的初始樣式，再與變化的value值進(jìn)行運(yùn)算
從抖動(dòng)實(shí)現(xiàn)上來說，使用第二種方法，把距離變化完全交給value值變化來實(shí)現(xiàn)較為簡(jiǎn)單
所以，代碼實(shí)現(xiàn)的關(guān)鍵就是了解value是如何變化的
假設(shè)最遠(yuǎn)距離為目標(biāo)target，同方向的距離間隔為步長(zhǎng)step。如果用數(shù)字更直觀的表示，value的值類似于4、-4、2、-2、0。所以還需要一個(gè)變量dir來控制起始抖動(dòng)方向，定時(shí)器每運(yùn)動(dòng)一次都要對(duì)dir進(jìn)行更改
//定時(shí)器開啟前的變量聲明
dir = 1;
step = 0;
left = div.offsetLeft
//定時(shí)器里面的代碼
value = dir*(target - step);
if(step >= target){
step = target
}
div.style.left = left + value + 'px';
if(dir === -1){
step++;
}
dir = -dir;
將抖動(dòng)效果封裝為shakeMove.js
function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
}
function shakeMove(json){
//聲明要進(jìn)行抖動(dòng)的元素
var obj = json.obj;
//聲明元素抖動(dòng)的最遠(yuǎn)距離
var target = json.target;
//默認(rèn)值為20
target = Number(target) || 20;
//聲明元素的變化樣式
var attr = json.attr;
//默認(rèn)為'left'
attr = attr || 'left';
//聲明元素的起始抖動(dòng)方向
var dir = json.dir;
//默認(rèn)為'1'，表示開始先向右抖動(dòng)
dir = Number(dir) || '1';
//聲明元素每次抖動(dòng)的變化幅度
var stepValue = json.stepValue;
stepValue = Number(stepValue) || 2;
//聲明回調(diào)函數(shù)
var fn = json.fn;
//聲明步長(zhǎng)step
var step = 0;
//保存樣式初始值
var attrValue = parseFloat(getCSS(obj,attr));
//聲明參照值value
var value;
//清除定時(shí)器
if(obj.timer){return;}
//開啟定時(shí)器
obj.timer = setInterval(function(){
//抖動(dòng)核心代碼
value = dir*(target - step);
//當(dāng)步長(zhǎng)值大于等于最大距離值target時(shí)
if(step >= target){
step = target
}
//更新樣式值
obj.style[attr] = attrValue + value + 'px';
//當(dāng)元素到達(dá)起始點(diǎn)時(shí)，停止定時(shí)器
if(step == target){
clearInterval(obj.timer);
obj.timer = 0;
//設(shè)置回調(diào)函數(shù)
fn && fn.call(obj);
}
//如果此時(shí)為反向運(yùn)動(dòng)，則步長(zhǎng)值變化
if(dir === -1){
step = step + stepValue;
}
//改變方向
dir = -dir;
},50);
}
實(shí)例應(yīng)用
下面利用封裝的shakeMove來實(shí)現(xiàn)一些簡(jiǎn)單的抖動(dòng)應(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實(shí)現(xiàn)窗口抖動(dòng)效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
本文給大家匯總介紹了javascript格式化日期時(shí)間的五種常用方法，個(gè)人對(duì)第五種個(gè)性化輸出時(shí)間比較有興趣，基本上只要項(xiàng)目中能用到都是使用第五種，推薦給小伙伴們。2015-06-06
ExpressJS使用express-ws的實(shí)例詳解
這篇文章主要介紹了ExpressJS使用express-ws的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
javascript限制文本框只允許輸入數(shù)字(曾經(jīng)與現(xiàn)在的方法對(duì)比)
很多時(shí)候需要用到限制文本框的數(shù)字輸入，試過許多方法，都不太理想，遂決定自己實(shí)現(xiàn)一個(gè)來玩玩,接下來介紹曾經(jīng)使用過的方法與自定義方法的對(duì)比，感興趣的朋友可以了解下啊2013-01-01
這篇文章主要給大家介紹了關(guān)于JS中數(shù)組合并的幾種常見方法,在開發(fā)的過程中,我們很多時(shí)候會(huì)遇到需要將兩個(gè)數(shù)組合并成一個(gè)數(shù)組的情況,文中通過實(shí)例代碼介紹的非常詳細(xì),出現(xiàn)需要的朋友可以參考下2023-07-07
javascript仿php的print_r函數(shù)輸出json數(shù)據(jù)
輸出json數(shù)據(jù)，php的print_r函數(shù)可以輕松實(shí)現(xiàn)，下面為大家介紹下javascript也可以模仿print_r函數(shù)輸出json數(shù)據(jù)，具體實(shí)現(xiàn)如下，感興趣的朋友可以了解下2013-09-09
利用Console來Debug的10個(gè)高級(jí)技巧匯總
通常，我們?cè)诰帉懸粋€(gè)新的JavaScript代碼過程中經(jīng)常會(huì)發(fā)生錯(cuò)誤，可能是語法錯(cuò)誤，可能是邏輯錯(cuò)誤，如果沒有一個(gè)調(diào)試工具幫助我們的話，相信你怕是頭都要炸了。下面這篇文章主要給大家總結(jié)介紹了關(guān)于利用Console來Debug的10個(gè)高級(jí)技巧，需要的朋友可以參考下。2018-03-03
es6 for循環(huán)中l(wèi)et和var區(qū)別詳解
這篇文章主要介紹了es6 for循環(huán)中l(wèi)et和var區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
Javascript如何實(shí)現(xiàn)雙指控制圖片功能
這篇文章主要介紹了Javascript如何實(shí)現(xiàn)雙指控制圖片功能,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
下面小編就為大家?guī)硪黄獪\談js中的三種繼承方式及其優(yōu)缺點(diǎn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-08-08
JS+CSS實(shí)現(xiàn)的漂亮漸變背景特效代碼(6個(gè)漸變效果)
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的漂亮漸變背景特效代碼,包含6個(gè)漸變效果,涉及JavaScript針對(duì)頁面元素屬性動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-03-03