jsパッケージの多物体運動方法

7629 ワード

多物体運動
  • を実現します.
    一、実現する
    var div = document.getElementsByTagName('div');
    for(var i = 0;i < div.length;i ++){
        div[i].onmouseenter = function(){
            cushion(this,800);//  this,      
        };
        div[i].onmouseleave = function(){
            cushion(this,100);
        };
    };
    function getStyle(dom,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(dom,null)[attr];
        }else{
            return dom.currentStyle[attr];
        }
    }//           
    var timer;//     
    function cushion(dom,target){
        clearInterval(dom.timer);
        var speed,iCur;
        dom.timer = setInterval(function(){
        // timer  dom  ,        dom        
            iCur = parseInt(getStyle(dom,'width'));
            speed = (target - iCur)/7;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(iCur == target){
                clearInterval(dom.timer);
            }else{
                dom.style.width = iCur + speed + 'px';
            }
        },40)
    };