js运动基础1

运动中的bug:

不会停止
速度取某些值会无法停止除了本节讲的以外还可以用Math.abs()绝对值来判断在下一节。
到达位置后再点击还会运动
重复点击速度加快

解决方法：一个定时器，用if else ，先clearInterval()

想要控制物体快慢：改变speed的大小。

<style>
        body{
            width: 700px;
        }
        #div1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 50px;
        }
    </style>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById('obtn');
            var oDiv=document.getElementById('div1');
            oBtn.onclick=function(){

           var timer=setInterval(function(){
               var speed=10;
               if(oDiv.offsetLeft==300){
                   clearInterval(timer)
               }
                oDiv.style.left=oDiv.offsetLeft+speed+"px";
            },30)
        }
        }
    </script>
</head>
<body>
<input type="button" value="开始运动" id="obtn"/>

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

</body>

speed=7的时候，物体不停止。物体位置 0 7 14...280 287 294 301

 <script>
        window.onload=function(){
            var oBtn=document.getElementById('obtn');
            var oDiv=document.getElementById('div1');
            oBtn.onclick=function(){
                var timer=setInterval(function(){
                var speed=7;
               if(oDiv.offsetLeft==300){
                   clearInterval(timer)
               }
                oDiv.style.left=oDiv.offsetLeft+speed+"px";
            },30)
        }
        }
    </script>

运动框架：

在开始运动时，关闭已有定时器
把运动和停止隔开（if/else）

物体没有经过300，直接跳到了301.把oDiv.offsetLeft==300改成oDiv.offsetLeft>=300便可

此时当你点击按钮，div还会向前走一步。原因是虽然我们设置了停止定时器，但是每次停止定时器的话是下一步再停止。所以div还是会往前走一步。

oDiv.style.left=oDiv.offsetLeft+speed+"px";这个代码还会执行一次。

写成if else即可。

 <script>
        window.onload=function(){
            var oBtn=document.getElementById('obtn');
            var oDiv=document.getElementById('div1');
            oBtn.onclick=function(){
                var timer=setInterval(function(){
                var speed=7;
               if(oDiv.offsetLeft>=300){
                   clearInterval(timer)
               }else{
                oDiv.style.left=oDiv.offsetLeft+speed+"px";
               }
            },30)
        }
        }
    </script>

当把speed改成1时，div慢慢走，再多点几下，speed就会变快。原因：每点击一次就会开一次定时器，点击5此，就不是每30毫秒走1个像素，而是走5个像素。定时器开了好几个。如果只有一个定时器在工作就没有问题了。

<script>
        window.onload=function(){
            var oBtn=document.getElementById('obtn');
            var oDiv=document.getElementById('div1');
            var timer=null;
            oBtn.onclick=function(){
                clearInterval(timer);//每点击一次，就先关定时器。这样就可以保证只有一个定时器了。
                timer=setInterval(function(){
                var speed=1;
               if(oDiv.offsetLeft>=300){
                   clearInterval(timer)
               }else{
                oDiv.style.left=oDiv.offsetLeft+speed+"px";
               }
            },30)
        }
        }
    </script>

鼠标经过div,则div块出现。移出消失：

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 150px;
            height: 200px;
            background: green;
            position: absolute;
            left: -150px;
        }
        #div1 span{
            position: absolute;
            width: 20px;
            height: 60px;
            line-height: 20px;
            background: blue;
            right: -20px;
            /*left: 0;*/
            top: 70px;
        }
    </style>

    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            oDiv.onmouseover=function(){
                startMove();
            }
            oDiv.onmouseout=function(){
                returnMove();
            }
        };

        var timer=null;
        function startMove(){
            var oDiv=document.getElementById('div1');
            clearInterval(timer);
            timer=setInterval(function(){
                if(oDiv.offsetLeft==0){
                    clearInterval(timer);
                }else{
                    oDiv.style.left=oDiv.offsetLeft+10+"px";
                }
            },30)
        }

        function returnMove(){
            var oDiv=document.getElementById('div1');
            clearInterval(timer);
            timer=setInterval(function(){
                if(oDiv.offsetLeft==-150){
                    clearInterval(timer);
                }else{
                    oDiv.style.left=oDiv.offsetLeft-10+"px";
                }
            },30)
        }
    </script>
</head>
<body>
<div id="div1">
    <span>分享到</span>
</div>
</body>

简化代码：

<script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            oDiv.onmouseover=function(){
                startMove(10,0);
            }
            oDiv.onmouseout=function(){
                startMove(-10,-150);
            }
        };

        var timer=null;
        function startMove(speed,iTarget){
            var oDiv=document.getElementById('div1');
            clearInterval(timer);
            timer=setInterval(function(){
                if(oDiv.offsetLeft==iTarget){
                    clearInterval(timer);
                }else{
                    oDiv.style.left=oDiv.offsetLeft+speed+"px";
                }
            },30)
        }


    </script>

不想把speed传进函数中，同一功能的函数，参数越多，性能越低。

<script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            oDiv.onmouseover=function(){
                startMove(0);
            }
            oDiv.onmouseout=function(){
                startMove(-150);
            }
        };

        var timer=null;
        function startMove(iTarget){
            var oDiv=document.getElementById('div1');
            clearInterval(timer);
            timer=setInterval(function(){
                var speed=0;
                //根据当前位置和目标点的相对位置判断向左走还是向右走
                if(oDiv.offsetLeft>iTarget){
                    speed=-10;
                }else{
                    speed=10;
                }

                if(oDiv.offsetLeft==iTarget){
                    clearInterval(timer);
                }else{
                    oDiv.style.left=oDiv.offsetLeft+speed+"px";
                }
            },30)
        }


    </script>

图片淡入淡出：

<style>

        #div1{
            width: 100px;
            height: 100px;
            background: red;
            filter: alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            oDiv.onmouseover=function(){
                startMove(100);
            }
            oDiv.onmouseout= function () {
                startMove(30);
            }
        }
        var alpha=30;
        var timer=null;

        function startMove(iTarget){
            var oDiv=document.getElementById('div1');
            clearInterval(timer);
            timer=setInterval(function(){
                var speed=0;
                if(alpha<iTarget){
                    speed=10;
                }else{
                    speed=-10;
                }

                if(alpha==iTarget){
                    clearInterval(timer)
                }else{
                    alpha+=speed;
                    //兼容性
                    oDiv.style.filter='alpha(opacity:'+alpha+')';//IE
                    oDiv.style.opacity=alpha/100;//火狐
                }
            },30);

        }

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

</body>

猜你喜欢