首頁  >  文章  >  web前端  >  JavaScript實作視窗抖動效果實例程式碼

JavaScript實作視窗抖動效果實例程式碼

怪我咯
怪我咯原創
2017-07-04 15:14:532080瀏覽

抖動效果在各大網頁上都常遇到,這篇文章主要介紹了JavaScript實現窗口抖動效果的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下

原理介紹

#  抖動其實是往復運動的一種特殊形式,只不過往復運動是一種無摩擦力的無限運動,且以速度為參照依據;而抖動以位置作為參照依據,最終停在起始點

  在網頁中最常見的一種抖動效果應該是窗口抖動提示了

  抖動元素從起始點開始,先向右移動最大距離len,然後移動到對稱的左邊位置;然後再向右移動稍微小一點的距離,再移動到對稱的左邊位置;以此循環,最終元素停止在起始點

程式碼實作

  抖動在程式碼實作上,無非就是透過定時器,每隔一段時間讓left或top值進行變化

  在運動實現中,有兩個距離變化的思路

##思路一

p.style.left = p.offsetLeft + value;

  每次都取得元素的目前樣式,再與變化的value值運算

想法二#

left = p.offsetLeft;
......
p.style.left = left + value;

  在定時器開啟之前,取得元素的初始樣式,再與變化的value值進行運算

  從抖動實作上來說,使用第二種方法,把距離變化完全交給value值變化來實現較為簡單

  所以,程式碼實現的關鍵就是了解value是如何變化的

  假設最遠距離為目標target,同方向的距離間隔為步長step。如果用數字更直觀的表示,value的值類似4、-4、2、-2、0。所以還需要一個變數dir來控制起始抖動方向,定時器每運動一次都要對dir進行更改

//定时器开启前的变量声明
dir = 1;
step = 0;
left = p.offsetLeft
//定时器里面的代码
value = dir*(target - step);
if(step >= target){
step = target
}
p.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;
//默认值为20
target = 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;
//声明步长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);
//当步长值大于等于最大距离值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>
<p id="box">
<p class="test" style="left:10px;background:lightblue"></p>
<p class="test" style="left:70px;background:lightgreen"></p>
<p class="test" style="left:130px;background:pink"></p>
<p class="test" style="left:190px;background:lightcoral"></p>
<p class="test" style="left:250px;background:orange"></p>
</p>
<script src="http://files.cnblogs.com/files/xiaohuochai/shakeMove.js"></script>
<script>
var ap = box.getElementsByTagName(&#39;p&#39;);
for(var i = 0; i < ap.length; i++){
ap[i].onmouseover = function(){
shakeMove({obj:this,attr:&#39;top&#39;});
}
}
</script>
</body>
</html>

以上是JavaScript實作視窗抖動效果實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn