如何实现具有多个属性的运动函数封装.js编写技巧？

本文共计311个文字，预计阅读时间需要2分钟。

javascript封装运动函数（多个属性）.js// 此运动函数只能用于样式值为数值的样式；json数据输入的是样式名和目标值function animate(obj, json, fn) { var sss=40; clearInterval(obj.timer); obj.timer=setInterval(function() { var flag=true; for (var attr in json) { var current=parseFloat(getStyle(obj, attr)); var target=json[attr]; var step=(target - current) / sss; step=step > 0 ? Math.ceil(step) : Math.floor(step); if (current !=target) { flag=false; obj.style[attr]=current + step + 'px'; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } }, 30);}

function getStyle(obj, attr) { if (window.getComputedStyle) { return window.getComputedStyle(obj, null)[attr]; } else { return obj.currentStyle[attr]; }}

运动函数的封装（多个属性）.js

//此运动只能用在样式值为数值的样式；json数据输入的是样式名和目标样式 function animate(obj,json,fn){ var sss = 40; clearInterval(obj.timer); obj.timer = setInterval(function(){ var flag = true; for(var attr in json){ var current = 0; if (attr == "opacity") { console.log(getStyle(obj,attr)); current = getStyle(obj,attr)*100 || 0; var step = (json[attr] * 100 - current) / 10; }else{ current = parseInt(getStyle(obj,attr)); var step = (json[attr] - current) / 10; } step = step > 0 ? Math.ceil(step) : Math.floor(step); if(attr == "opacity"){ if( "opacity" in obj.style ){ obj.style[attr] = (current + step) / 100; }else{ obj.style.filter = "alpha(opacity="+ current + step +")"; } }else{ obj.style[attr] = current + step + "px"; } if (current != json[attr]) { flag = false; }; } if(flag){ clearInterval(obj.timer); if(fn){ fn(); }else{ console.log("1"+fn); } } },30) } function getStyle(obj,attr){ //注意：ie8以下，对于没有直接定义opactiy值时，getStyle(obj,attr)返回的是undefine if(obj.currentStyle) //ie等 { return obj.currentStyle[attr]; }else{ return window.getComputedStyle(obj,null)[attr]; //w3c } }