同时运动的宽度问题

来源:6-2 完美运动框架

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的精度不够吗?还是其他的原因?求解答

写回答 关注

2回答

  • 慕之光
    2016-05-16 15:32:51
    已采纳

    if(icur==json[attr]){

                        clearInterval(obj.timer);

                        if(fn){//上一个动作结束后,如果存在fn则调用fn

                            fn();

                        }

                    }

    看这段代码,同时运动时,当某个属性的当前值达到目标值时,就会关闭定时器,那么其他属性也就不得不停止运动,所以宽度达不到目标值

    lzlbu2

    非常感谢!

    2016-05-16 16:35:07

    共 1 条回复 >

  • lzlbu2
    2016-05-14 13:33:11

    老师后面已经讲解了,明白了。。。

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题