窗口滚动跟随窗口的小方框

//原理：页面卷动的时候; 获取 scrollTop ; 给div赋值;
var leftBar = document.getElementById("left-bar");
var timer = null;
windeow.addEventListener("scroll",starMove);
function starMove(){
 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 var target = scrollTop + cHeight / 2 - leftBar.offsetHeight/2;
 target = Math.round(target);
 move(target);
}
function move(target){
    clearInterval(timer);
    timer= setInterval(function(){
        var speed = (target - leftBar.offsetTop)/6;
        speed = speed >0 ? Math.ceil(speed) : Math.floor(speed);
        leftBar.style.top = leftBar.offsetTop + speed + "px";
        if(leftBar.offsetTop === target){
            clearInterval(timer);
        }
    },50)
}

缓冲运动

var 
start = document.getElementById("start"),
ruler = document.getElementById("ruler"),
box = document.getElementById("box"),
timer = null,
target = 400;
start.addEventListener("click",startMove);
function startMove(){
    move();
}
function move(target){
    clearInterval(timer);
    timer = setInteval(function(){
        var speed = (target - box.offsetLeft)/6;
    speed = speed >0 ? Math.ceil(speed) : Math.floor(speed);
    box.style.left = box.offsetLeft + speed + "px";
    if(box.offsetLeft === target){
        clearInterval(timer);
    } 
    },50);
}

透明度运动

var
box = document.getElementById("box"),
timer = null;
box.addEventListener("mouseenter",startMove);
box.addEventLister("mouseleave",endMove);
function startMove(){
    move(30);
}
function endMove(){
    move(100);
}
function move(target){
    clearInterval(timer);
    timer = setInterval(function(){
        var iNow = getStyle(box,"opacity")*100;
        var speed = (target -iNow)/6;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        box.style.opacity = (iNow + speed)/100;
        if(iNow === target){
            clearInterval(timer);
        }
    },50)
}
function getStyle(dom,attr){
    return getComputedStyle(dom)[attr];
}

多物体运动

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>



//当鼠标移入每个box的时候，让box的宽度运动到500px；

var boxList = document.querySelectorAll(".box"),
      timer = null,
      gs = getComputedStyle;
 for(var i = 0 , ele ; ele = boxList[i++];){
    //对象中的属性在没有声明时返回的是undefined而不会报错；
     ele.addEventListener("mouseenter",startMove); 
 }
 function startMove(evt){
    var e = evt || event;
    var target = e.target || e.srcElement;
    move(target,500);
 }
 function move(eleNode,target){
    //1、开启并关闭定时器
    //2、计算速度
    //3、赋值运动
    //4、终止条件
    clearInterval(eleNode.timer);
    eleNode.timer = setInterval(function(){
    //gs => getComputedStyle;工具=>获取当前元素的所有css属性；
    //获取的值是带有px的字符串，用parseInt 去掉px
    var iNow = parseInt(gs(eleNode)["width"]);
        var speed = (target - iNow)/6;
        speed  = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        iNow += speed;
        eleNode.style.width = iNow +"px";
        if(iNow === target){
            clearInterval(eleNode.timer);
        }
    },50)
    }

多物体透明度

//当鼠标移入每个box的时候，让box的透明度变为0；

var
boxList = document.querySelectorAll(".box"),
timer = null,
gs = getComputedStyle;
for(var i = 0 , ele ; ele = boxList[i++];){
    ele.addEventListener("mouseenter",startMove);
}
function startMove(evt){
    var e = evt || event;
    var target = e.target || e.srcElement;
    move(target,0);
}
function move(eleNode,target){
    clearInterval(eleNode.timer);
    eleNode.timer = setInterval(function(){
        var iNow = gs(eleNode)["opacity"] *100;
        var speed = (target-iNow)/6;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        iNow += speed;
        eleNode.style.opacity = iNow/100;
        if(iNow === target){
                clearInterval(eleNode.tiemr);
        }
    },50)
}

多物体任意属性运动

<div class="box">变宽</div>
<div class="box">变高</div>
<div class="box">变透明</div>

<script>

var
boxList = document.querySelectorAll(".box"),
timer = null,
gs = getComputedStyle;

boxList[0].addEventListener("mouseenter",function(evt){
    var e = evt || event;
    var target = e.target || e.srcElement;
    move(target,500,"width");
})
boxList[1].addEventListener("mouseenter",function(evt){
    var e = evt || event;
    var target = e.target || e.srcElement;
    move(target,500,"height");
})
boxList[2].addEventListener("mouseenter",function(evt){
    var e = evt || event;
    var target = e.target || e.srcElement;
    move(target,30,"opacity");
})
function move(eleNode,target,attr){
        clearInterval(eleNode.timer);
        eleNode.timer = setInterval(function(){
         if(attr === "opacity"){
             var iNow = gs(eleNode)[attr]*100;
        }else{
         var iNow = parseInt(gs(eleNode)[attr]);
        }  
        var speed = (target - iNow)/6;
        speed = speed > 0 ; Math.ceil(speed) : Math.floor(speed);
        
        iNow += speed;
        if(attr === "opacity"){
            eleNode.style.[attr] = iNow/100;
        }else{
            eleNode.style.[attr] = iNow + "px";
        }
        if(iNow === target){
            clearInterval(eleNode.timer);
        }
        },50)
}
</script>