通過在公司一個月的實習，慢慢的對css跟html算是比較熟悉了，這幾天開始研究js，今天用js寫了一個jquery的animate函數，測試了下，性能還可以。個人覺得jquery并不是萬能的，因為是個框架，所以有些東西寫的比較死，就像animate函數一樣，可選的參數不多有時候可能并不能實現我們想要的效果。
注釋的部分是用來測試用的，寫代碼的過程并不是十分順利，因為用js平時用的不是很細，都是大體知道方法，也用過，但等到真正要實現動畫函數的時候，細枝末節寫錯了就可能把人難住了。
函數里面有幾個參數解釋一下，
•obj, 函數的對象
•json, 數值對，形式{attr：”value”, attr: “value”}，在這里是指要動畫對象的運動屬性
•interval, 每執行一次改變的間隔，這里改變的是對象是屬性值
•sp, 值變換的速度，使動畫具有緩沖效果，而不只是勻速不變（sp為1）的
•fn, 回調函數，執行完動畫之后的行為
代碼比較簡單，只是有幾個細節需要注意，在這里提醒一下：
•對象的屬性不必直接聲明，所以函數的第一句clearInterval(obj.timer);并不會報錯。
•必須為每一個對象分別添加一個定時器，否則互相會影響，一個定時器公用的結果是定時器的多個對象運動出現卡頓。
•son數據格式了解一下，當遍歷對象的動畫屬性的時候，需要icur != json[arr]判斷是否每一個屬性已經達到目標值。flag的作用是防止當其中某個屬性第一個達到目標值后，clearInterval(obj.timer)清除了定時器，結果其他動畫屬性并沒有達到目標值。所以在每次遍歷的時候初始化flag值為true，只要遇到一個沒有達到目標屬性的對象，就將flag置為false，直至對象的所有屬性達到目標值，清除定時器。
•speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
這一句的作用是將屬性值取整，因為屬性值除了opacity沒有小數。
•最后調用的時候注意動畫的對象，在使用for循環的時候不能隨意使用arr[i]形式，尤其是嵌套循環的時候i的值已經變成了最大值。
js
function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); //var k = 0; //var j = 0; function getStyle(obj, arr) { if(obj.currentStyle){ return obj.currentStyle[arr]; //針對ie } else { return document.defaultView.getComputedStyle(obj, null)[arr]; } } obj.timer = setInterval(function(){ //j ++; var flag = true; for(var arr in json) { var icur = 0; //k++; if(arr == "opacity") { icur = Math.round(parseFloat(getStyle(obj, arr))*100); } else { icur = parseInt(getStyle(obj, arr)); } var speed = (json[arr] - icur) * sp; speed = speed > 0 ? Math.ceil(speed): Math.floor(speed); if(icur != json[arr]){ flag = false; } if(arr == "opacity"){ obj.style.filter = "alpha(opacity : '+(icur + speed)+' )"; obj.style.opacity = (icur + speed)/100; }else { obj.style[arr] = icur + speed + "px"; } //console.log(j + "," + arr +":"+ flag); } if(flag){ clearInterval(obj.timer); //console.log(j + ":" + flag); //console.log("k = " + k); //console.log("j = " + j); //console.log("DONE"); if(fn){ fn(); } } },interval);}調用方式：
<script> var move = document.getElementById("move").getElementsByTagName("li"); for(var i = 0; i < move.length; i ++){ move[i].onmouseover = function(){ var _this = this; animate(_this, {width: 500, height: 200},10, 0.01, function(){ animate(_this, {width: 300, height: 200},10, 0.01); }); } }</script>以上這篇原生js實現jquery函數animate()動畫效果的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
