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 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦