变速动画函数封装增加任意多个属性和回调函数及层级和透明度

xiaoxiao2021-03-01  44

获取任意一个元素的任意一个属性的当前的值---当前属性的位置值

function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } function animate(element,json,fn){ clearInterval(element.timeId); element.setInterval(function(){ var flag=true; for (var attr in json){ if (attr=="opacity"){ var current=getStyle(element,attr)*100; var target=json[attr]*100; var step=(target-current)/10; step=step>0?Math.ceil(step):Math.floor(step); current+=step; element.style[attr]=current/100; } else if(attr=="zIndex"){ element.style[attr]=json[attr]; } else { var current=parseInt(getStyle(element,attr)); var target=json[attr]; var step=(target-current)/10; step=step>0?Math.ceil(step):Math.floor(step); current+=step; element.style[attr]=current+"px"; } if(current!=target){ flag=false; } } if(flag){ clearInterval(element.timeId); if(fn){ fn(); } } },20); }

测试代码

my$("btn1").onclick = function () { var json1 = {"width": 400, "height": 500, "top": 80, "left": 500, "opacity": 0.2}; animate(my$("dv"), json1, function () { var json2 = {"width": 500, "height": 500, "top": 0, "left": 0, "opacity": 0.8, "zIndex": 1000}; animate(my$("dv"), json2); }); };

 

 

转载请注明原文地址: https://www.6miu.com/read-4200237.html

最新回复(0)