function startMove(obj,json,func){
clearInterval(obj.timer);
var i = true;//假设所有运动都完成
obj.timer = setInterval(function(){
//1.取值
for(var arrt in json){
var ice = 0;
//判断是否是透明度
if(arrt == 'opacity'){
ice = Math.round(parseFloat(getStyle(obj,arrt))*100);//当前透明度数值
}else{
ice = parseInt(getStyle(obj,arrt));//当前数值
}
//2.计算速度
var speed = (json[arrt]-ice)/5;
//做缓冲运动的值的取整,如果大于0,向上取整;小于0,向下取整。
speed = (speed>0)?Math.ceil(speed):Math.floor(speed);
//3.检查停止
if(ice != json[arrt]){
i = false;//假如当前值不等于目标值,继续执行以下操作。
}
if(arrt == 'opacity'){
//针对IE浏览器
obj.style.filter = 'alpha(opacity:'+(ice+speed)+')';
//针对FireFox(火狐浏览器)/Chrom(谷歌浏览器)
obj.style.opacity = (ice+speed)/100;
}else{
obj.style[arrt] = ice + speed + 'px';
}
}
if(i){//假如i成立(等于true),关闭计时器
clearInterval(obj.timer);
if(func){//判断是否还有后调函数
func();
}
}
},30);
}
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById('id');
div.onmouseover = function(){
startMove(div,{width:400,height:300},function(){
startMove(div,{opacity:100});
});
}
div.onmouseout = function(){
startMove(div,{width:200,height:150},function(){
startMove(div,{opacity:30});
});
}
}
</script>
添加回答
举报
0/150
提交
取消