JavaScript抖動的實現
標簽：
JavaScript
实现原理
抖动的实现原理其实就是让节点元素进行位置的偏移，所以在实现此功能的时候最好节点元素进行绝对定位，然后来修改它们的top和left值。
这里有几个要点，第一是要准备好需要偏移的频率，这个可以通过把偏移距离放到数组中来控制偏移距离，偏移距离跳动幅度越小，效果就越平稳。定时器时间决定了节点抖动的速度。
代码如下：
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Made with Thimble</title>
<link rel="stylesheet" href="style.css">
<style>
img{ width:300px; height: 400px; position:absolute; top:20px; left:150px;
} </style></head><body><img id="img1" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://newimg.uumnt.cc:8092/Pics/2017/0622/03/06.jpg"></body><script>
var oImg = document.getElementById('img1');
oImg. = function(){ //this 到函数里面作用域会变，这里赋值先变成局部
var that = this;
shaking(that,'top',function(){
shaking(that,'left');
});
}; // 抖动函数封装 attr：left水平抖动 top：垂直抖动
function shaking(obj,attr,callback){ var pos = parseInt(getStyle(obj,attr)); var arr = []; var num = 0; for(var i=20;i>0;i-=2){
arr.push(i,-i);
}
arr.push(0);
clearInterval(obj.shaking);
obj.shaking = setInterval(function(){
obj.style[attr] = pos + arr[num] + 'px';
num ++; if(num === arr.length){
clearInterval(obj.shaking);
callback && callback();
}
},50);
} // 获取节点对象的样式属性值
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];
}else{ return window.getComputedStyle(obj,false)[attr];
}
}</script></html>
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦