這篇文章帶給大家的內容是關於js中抖動的實現原理(附程式碼) ,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
抖動的實作原理其實就是讓節點元素進行位置的偏移,所以在實作此功能的時候最好節點元素進行絕對定位,然後來修改它們的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" src="https://newimg.uumnt.cc:8092/Pics/2017/0622/03/06.jpg"> </body> <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> </html>
相關推薦:
以上是js中抖動的實作原理(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!