本篇文章给大家带来的内容是关于js中抖动的实现原理(附代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
抖动的实现原理其实就是让节点元素进行位置的偏移,所以在实现此功能的时候最好节点元素进行绝对定位,然后来修改它们的top和left值。
这里有几个要点,第一是要准备好需要偏移的频率,这个可以通过把偏移距离放到数组中来控制偏移距离,偏移距离跳动幅度越小,效果就越平稳。定时器时间决定了节点抖动的速度。
代码如下:
nbsp;html> <meta> <meta> <title>Made with Thimble</title> <link> <style> img{ width:300px; height: 400px; position:absolute; top:20px; left:150px; } </style><img alt="js中抖动的实现原理(附代码)" ><script> var oImg = document.getElementById('img1'); oImg.onclick = 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>
相关推荐:
以上就是js中抖动的实现原理(附代码)的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号