多物体运动框架1

多物体同时运动
多个div,鼠标移入变宽
单定时器，存在问题
每个Div一个定时器

多物体运动不能共用一个定时器，每个div定一个定时器。

多物体运动不能共用一个属性，所有东西不能共用。

鼠标一接触，其宽度到300px.

<style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin-top: 5px;
        }
    </style>
</head>
<script>
    window.onload=function(){
        var oDiv=document.getElementsByTagName('div');
        for(var i=0;i<oDiv.length;i++){
            oDiv[i].onmouseover=function(){
                startMove(300,this);
            }

            oDiv[i].onmouseout=function(){
                startMove(100,this);
            }
        }

    }

    var timer=null;
    function startMove(iTarget,obj){
        clearInterval(timer);
        timer=setInterval(function(){
            var speed=(iTarget-obj.offsetWidth)/6;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(obj.offsetWidth==iTarget){
                clearInterval(timer)
            }else{
                obj.style.width=obj.offsetWidth+speed+'px';
            }

        },30);


    }

</script>
<body>
<div></div>
<div></div>
<div></div>

</body>

问题：整个程序中只有一个定时器，当鼠标从一个div移到另一个div中，所以前一个div变不会原来的位置。

在每个obj上面都加一个定时器。

<script>
    window.onload=function(){
        var oDiv=document.getElementsByTagName('div');
        for(var i=0;i<oDiv.length;i++){
            oDiv[i].timer=null;
            oDiv[i].onmouseover=function(){
                startMove(300,this);
            }

            oDiv[i].onmouseout=function(){
                startMove(100,this);
            }
        }

    }

    /*var timer=null;*/
    function startMove(iTarget,obj){
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            var speed=(iTarget-obj.offsetWidth)/6;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(obj.offsetWidth==iTarget){
                clearInterval(obj.timer)
            }else{
                obj.style.width=obj.offsetWidth+speed+'px';
            }

        },30);
    }

</script>

多个div淡入淡出

 <style>
        div{
            width: 100px;
            height: 100px;
            margin: 20px;
            float: left;
            background: red;
            filter:alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
</head>
<script>
    window.onload=function(){
        var oDiv=document.getElementsByTagName('div');
        for(var i=0;i<oDiv.length;i++){
            oDiv[i].timer=null;
            oDiv[i].onmouseover=function(){
                startMove(this,100);
            }

            oDiv[i].onmouseout=function(){
                startMove(this,30);
            }
        }

    }
    var alpha=30;
    /*var timer=null;*/
    function startMove(obj,iTarget){
        clearInterval(obj.timer);
          obj.timer=setInterval(function(){
            /*var speed=0;
            if(iTarget>alpha){
                speed=10;
            }else{
                speed=-10;
            }*/
              var speed=(iTarget-alpha)/6;
              speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(alpha==iTarget){
                clearInterval(obj.timer);
            }else{
                alpha+=speed;
                obj.style.filter='alpha(opacity:'+alpha+')';//IE
                obj.style.opacity=alpha/100;
            }
        },30);
    }
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

还是有问题。在多物体运动中，所有的东西都不能共用。alpha共用了。

多物体运动框架
定时器作为物体的属性
参数的传递：物体、目标值
多个物体淡入淡出：
所有东西都不能共用
属性与运动对象绑定

<style>
        div{
            width: 100px;
            height: 100px;
            margin: 20px;
            float: left;
            background: red;
            filter:alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
</head>
<script>
    window.onload=function(){
        var oDiv=document.getElementsByTagName('div');
        for(var i=0;i<oDiv.length;i++){
            oDiv[i].alpha=30;
            oDiv[i].timer=null;
            oDiv[i].onmouseover=function(){
                startMove(this,100);
            }

            oDiv[i].onmouseout=function(){
                startMove(this,30);
            }
        }

    }
    var alpha=30;
    /*var timer=null;*/
    function startMove(obj,iTarget){
        clearInterval(obj.timer);
          obj.timer=setInterval(function(){
            /*var speed=0;
            if(iTarget>alpha){
                speed=10;
            }else{
                speed=-10;
            }*/
              var speed=(iTarget-obj.alpha)/6;
              speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(obj.alpha==iTarget){
                clearInterval(obj.timer);
            }else{
                obj.alpha+=speed;
                obj.style.filter='alpha(opacity:'+obj.alpha+')';//IE
                obj.style.opacity=obj.alpha/100;
            }
        },30);
    }
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

offsetWidth:width+border+padding.

 <style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            border: 1px solid black;
        }
    </style>
    <script>
        setInterval(function(){
            var oDiv=document.getElementById('div1');
            oDiv.style.width=oDiv.offsetWidth-1+'px';

        },30);
    </script>
</head>
<body>
<div id="div1"></div>

</body>

红块的宽度不会减少反而会增加oDiv.offsetWidth=202.

解决方法我们用行间样式获取width。

<style>
        #div1{
            height: 200px;
            background: red;
            border: 1px solid black;
        }
    </style>
    <script>
        setInterval(function(){
            var oDiv=document.getElementById('div1');
            oDiv.style.width=parseInt(oDiv.style.width)-1+'px';

        },30);
    </script>
</head>
<body>
<div id="div1" style="width: 200px"></div>

</body>

注意：style只能取行间样式，如果width放在样式表里，就不能style.width获取了。

获取样式表的属性：

<style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            border: 1px solid black;
        }
    </style>
    <script>
        function getStyle(obj,name){
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj,false)[name];
            }
        }

        setInterval(function(){
            var oDiv=document.getElementById('div1');
            oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px';

        },30);
    </script>
</head>
<body>
<div id="div1"></div>

</body>

我们不能再用offsetWidth了，

两个div变宽变高：

<style>
        #div1,#div2{
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
            margin: 20px;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv1=document.getElementById('div1');
            oDiv1.onmouseover=function(){
                startMove(this,300);
            }
            oDiv1.onmouseout=function(){
                startMove(this,100);
            }

            var oDiv2=document.getElementById('div2');
            oDiv2.onmouseover=function(){
                startMove2(this,300);
            }
            oDiv2.onmouseout=function(){
                startMove2(this,100);
            }



        }

        function startMove(obj,iTarget){

           /* var timer=null;*/
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var speed=(iTarget-obj.offsetHeight)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(obj.offsetHeight==iTarget){
                    clearInterval(obj.timer);
                }else{
                    obj.style.height=obj.offsetHeight+speed+"px";
                }
            },30);
        }

        function startMove2(obj,iTarget){

            /*var timer=null;*/
            clearInterval(obj.timer);
            timer=setInterval(function(){
                var speed=(iTarget-obj.offsetWidth)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(obj.offsetWidth==iTarget){
                    clearInterval(obj.timer);
                }else{
                    obj.style.width=obj.offsetWidth+speed+"px";
                }
            },30);
        }
    </script>

</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
</body>

不用offsetWidth.....:

 <style>
        #div1,#div2{
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
            margin: 20px;
            border: 10px solid black;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv1=document.getElementById('div1');
            oDiv1.onmouseover=function(){
                startMove(this,300);
            }
            oDiv1.onmouseout=function(){
                startMove(this,100);
            }

            var oDiv2=document.getElementById('div2');
            oDiv2.onmouseover=function(){
                startMove2(this,300);
            }
            oDiv2.onmouseout=function(){
                startMove2(this,100);
            }



        }

        function getStyle(obj,name){
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj,false)[name];
            }
        }

        function startMove(obj,iTarget){

           /* var timer=null;*/
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var cur=parseInt(getStyle(obj,'height'));
                var speed=(iTarget-cur)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(cur==iTarget){
                    clearInterval(obj.timer);
                }else{
                    obj.style['height']=cur+speed+"px";
                }
            },30);
        }

       /* function startMove2(obj,iTarget){

            /!*var timer=null;*!/
            clearInterval(obj.timer);
            timer=setInterval(function(){
                var speed=(iTarget-obj.offsetWidth)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(obj.offsetWidth==iTarget){
                    clearInterval(obj.timer);
                }else{
                    obj.style.width=obj.offsetWidth+speed+"px";
                }
            },30);
        }*/
    </script>

</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
</body>

任意值运动框架：

简化：使用一个函数。

<style>
        #div1,#div2{
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
            margin: 20px;
            border: 10px solid black;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv1=document.getElementById('div1');
            oDiv1.onmouseover=function(){
                startMove(this,300,'height');
            }
            oDiv1.onmouseout=function(){
                startMove(this,100,'height');
            }

            var oDiv2=document.getElementById('div2');
            oDiv2.onmouseover=function(){
                startMove(this,300,'width');
            }
            oDiv2.onmouseout=function(){
                startMove(this,100,'width');
            }



        }

        function getStyle(obj,name){
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj,false)[name];
            }
        }

        function startMove(obj,iTarget,attr){

           /* var timer=null;*/
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var cur=parseInt(getStyle(obj,attr));
                var speed=(iTarget-cur)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(cur==iTarget){
                    clearInterval(obj.timer);
                }else{
                    obj.style[attr]=cur+speed+"px";
                }
            },30);
        }
    </script>

</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
</body>

上面的代码不仅仅可以让width和height变化，也可以让其他属性变化。但是opacity不可以。

 var oDiv3=document.getElementById('div3');
            oDiv3.onmouseover=function(){
                startMove(this,50,'fontSize');
            }
            oDiv3.onmouseout=function(){
                startMove(this,14,'fontSize');
            }

opacity也可以：

 <style>
        #div1{
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
            margin: 20px;
            border: 10px solid black;
            filter: alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv1=document.getElementById('div1');
            oDiv1.onmouseover=function(){
                startMove(this,100,'opacity');
            }
            oDiv1.onmouseout=function(){
                startMove(this,30,'opacity');
            }


        }

        function getStyle(obj,name){
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj,false)[name];
            }
        }

        function startMove(obj,iTarget,attr){

           /* var timer=null;*/
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var cur=0;
                if(attr=='opacity'){
                    cur=parseFloat(getStyle(obj,attr))*100;
                }else{
                    cur=parseInt(getStyle(obj,attr));
                };
                var speed=(iTarget-cur)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(cur==iTarget){
                    clearInterval(obj.timer);
                }else{
                    if(attr=='opacity'){
                        obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                        obj.style.opacity=(cur+speed)/100;
                    }else{
                        obj.style[attr]=cur+speed+"px";
                    };

                }
            },30);
        }
    </script>

</head>
<body>
<div id="div1"></div>

</body>

计算机不能真正存储小数。其实它存的是近似值。

Math.round();四舍五入。

  //Math.round四舍五入
  cur=Math.round(parseFloat(getStyle(obj,attr))*100);

猜你喜欢