lzlbu2
2016-05-14 11:49
function startMove(obj,json,fn){//使用json以同时传多个属性和目标值
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json){
var icur=0;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);//由于speed精度不够,导致数值较大时会导致运动的结果打不到预期值???
if(icur==json[attr]){
clearInterval(obj.timer);
if(fn){//上一个动作结束后,如果存在fn则调用fn
fn();
}
}else{
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}else{
obj.style[attr]=icur+speed+"px";
}
}
}
},30);
}
function getStyle(obj,attr){//通过此函数可无伤取到style,而不受其他样式的影响
if(obj.currentStyle){//IE浏览器
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}同时运动时,执行onmouseover后宽度并没有达到400,是因为speed的精度不够吗?还是其他的原因?求解答
if(icur==json[attr]){
clearInterval(obj.timer);
if(fn){//上一个动作结束后,如果存在fn则调用fn
fn();
}
}
看这段代码,同时运动时,当某个属性的当前值达到目标值时,就会关闭定时器,那么其他属性也就不得不停止运动,所以宽度达不到目标值
老师后面已经讲解了,明白了。。。
JS动画效果
113910 学习 · 1502 问题
相似问题