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动画效果
113925 学习 · 1443 问题
相似问题