/*获取元素属性函数*/
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr];
}
}
//多属性运动框架
function animate(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag = true;//判断停止计时器
for(var attr in json){
//利用attr遍历json数组，attr就是json的属性
var current = 0;//初始值
if(attr=='opacity'){
current=Math.round(parseInt(getStyle(obj,attr)*100));
}else{
current=parseInt(getStyle(obj,attr));
}
var step = (json[attr] - current)/10;//json[attr];
//就是我们传进来的，想要走到的位置，所以就是目标值，current就是初始值，也就是：（目标值-初始值）/10=步长
step = step>0?Math.ceil(step):Math.floor(step);//步长取整
if(attr=='opacity'){
obj.style.opacity=(current+step)/100;
}else if(attr =='zIndex'){
obj.style.zIndex=json[attr];
}else{
obj.style[attr]=current+step+'px';
}
if(current!=json[attr]){
flag=false;
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},10);
}
animate () 多属性动画函数封装
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 基本动画 使用 CABasicAnimation，实现一个动画 其中的animation.keyPath支持的键路...
