js让页面动起来 互动版

移动icon

这一节我们将尝试使用第二章写到的函数,制作类似淘宝中用到的移动icon logo运动


  1. 从图中我们可以观察到,他运用到了同时运动和链式运动由此我们可以将两个函数整理结合起来
  2. 我们从下往上移动时我们直接先要将top值设置为50px
function startMove(obj,attrClass,cb)
{
    clearInterval(timer);
    timer=setInterval(function(){
        for(attr in attrClass){
            if((attr === 'opacity'?getStyle(obj,attr)*100:getStyle(obj,attr))=== attrClass[attr])
            {
                isComplete=true;
                continue;
            }
            isComplete=false;
            if(attr === 'opacity')
            {
                var speed=(attrClass[attr] - getStyle(obj,attr)*100)/10;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                obj.style[attr]=(getStyle(obj,attr)*100+speed)/100.0;
            }
            else
            {
                var speed=(attrClass[attr] - getStyle(obj,attr))/10;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                obj.style[attr]=getStyle(obj,attr) + speed + 'px';
            }
        }
        if(isComplete){
            clearInterval(timer);
            if(cb){
                cb(obj);
            }
        }
    },10);
}
在右方填入相应的代码使top值设置为50px,以达到相应的效果