1 function animate1(obj,data,rate,fn){//运动对象,运动数据,[运动速度],[回调函数]2 //遍历获取样式属性3 for(var key in data){4 //通过闭包将key私有化5 (function(k){6 /*7 获得样式宽高等会带有单位px需要处理掉,8 如果使用parseInt,当传入opacity为小数时会变为0,所以使用parseFloat9 */10 var cur = parseFloat( (obj.currentStyle || getComputedStyle(obj,null) )[k]);1112 //对特殊值进行处理13 if(k == "opacity"){14 //透明度当前值和目标值放大100倍,防止小数被舍去15 cur *= 100;16 data[k] *= 100;17 }1819 //当前值和目标值相等,直接返回20 if(cur == data[k]){ return; }2122 //通过自身名字定义定时器,解决每个运动共用一个定时器,造成清除其他运动定时器的问题23 clearInterval(obj[k +'timer']);2425 obj[k+'timer'] = setInterval(function(){2627 //当前 += (目标-当前)*比率 比率不传则默认0.228 cur += (data[k] - cur) * (rate || 0.2);2930 if(Math.round(cur) == data[k]){31 //如果到达目标值清除定时器,同步数据32 clearInterval(obj[k+'timer']);33 cur=data[k];3435 //回调,将定时器赋值为0,遍历每个定时器的值相加,如果所有定时器相加都为0,说明运动已经全部完成,执行回调函数36 obj[k + "timer"] = 0;37 var bl = 0;38 for(var key in data){39 bl += obj[key + "timer"];40 }41 if(bl == 0){42 //判断是否传入回调函数43 fn && fn.call(obj);44 } //!!!!!!!!这里的fn&&fn.call(obj) 不懂,返回的是false的fn或fn.call(obj)还是布尔值false?45 }4647 //使用数据时判断特殊值48 if(k == "opacity"){49 //opacity具有兼容问题,ie8以下使用filter:alpha(opacity:100)50 obj.style.opacity = cur / 100;51 obj.style.filter = "alpha(opacity="+ cur +")";52 }else{53 obj.style[k] = cur + "px";54 }55 },30)56 })(key);57 }58 }
添加回答
举报
0/150
提交
取消