js实现类似于动画动画效果的方法
这个例子可以实现鼠标的移动,宽度先改变,然后高度改变,最后透明度改变,鼠标移动,然后依次返回效果。
点一点:
Startrun(对象,属性,目标,FN)
box.onmouseover =函数(){
Startrun(箱、宽
Startrun(盒,高
Startrun(盒,不透明度
});
});
}
如上所述,该函数也可以用作参数,以便可以先执行某个动作,然后执行某个动作的效果。
第二点:
如果(当前=目标){
ClearInterval(obj。定时器);
如果(FN){
(FN);
}
}
当运动到达目标点时,定时器被关闭,然后可以执行新的函数。
最后,上面的代码:
非所有权文件
<!——
体{ margin: 0;padding: 0;字体:宋体12px / 1.5;}
#箱{宽度:100px;身高:100px;位置:绝对的;
背景:# 06c;左:0;过滤器:α(不透明度30);不透明度:0.3;}
-->
<!——
功能getstyle(obj,name){
如果(obj。currentstyle){
返回的对象。currentstyle {姓名};
其他{ }
返回getcomputedstyle(obj,false){姓名};
}
}
在window.onload =函数(){
VaR箱= document.getelementbyid(盒子);
box.onmouseover =函数(){
Startrun(箱、宽
Startrun(盒,高
Startrun(盒,不透明度
});
});
}
box.onmouseout =函数(){
Startrun(盒,高
Startrun(箱、宽
Startrun(盒,不透明度
});
});
}
}
功能startrun(obj,属性,目标,FN){
ClearInterval(obj。定时器);
obj.timer = setInterval(){()函数(
var = 0;
如果(attr = =不透明度){
电流= math.round(parseFloat(getstyle(obj,ATTR))* 100);
其他{ }
电流= parseInt(getstyle(obj,ATTR));
}
var速度=(目标流) 8;
速度=速度> 0math.ceil(速度):Math.floor(速度);
如果(当前=目标){
ClearInterval(obj。定时器);
如果(FN){
(FN);
}
其他{ }
如果(attr = =不透明度){
obj.style.filter =Alpha(透明度=+(CUR +速度)+ );
obj.style.opacity =(CUR +速度) / 100;
其他{ }
obj。风格{属性} =电流+速度+PX;
}
}
},30)
}
希望本文能对大家的javascript程序设计有所帮助。