js运动

运动的原理:js定时器对dom元素的操作,来改变元素的状态.

代码编写时需要注意到的问题:如果是对位置的修改,就不能忘记加上'px',否则,就浏览器不会出错,元素的位置也不会改变

下面是css代码:

#div{width: 100px; height: 100px; background: skyblue;position: absolute;top: 50px;left: 0px;}
#line{width: 1px; height: 100px; background: tomato;position: absolute;top: 50px;left: 300px; }

这里是html代码:

 <div id="div">ceshi</div>
    <button id="btn1">开始</button>
    <button id="btn2">停</button>
    <div id="line"></div>

下面是js代码:

<script>
        var oBtn1=document.getElementById("btn1");
        var oBtn2=document.getElementById("btn2");
        var div=document.getElementById("div");
        oBtn1.onclick=function(){
            startMove(div,8);
        }
        oBtn2.onclick=function(){
           stopMove(div);
        }
        function startMove(obj,sx){
             stopMove(obj);
                obj.timer= setInterval(
                    function(){
                        if(obj.offsetLeft>=300){//此种判断方式不自然,有一种突然跳到300像素的感觉
                              stopMove(obj);
                              obj.style.left=300+'px';
                        }else{
                          obj.style.left=obj.offsetLeft+sx+'px';  
                        }
                        
                    },10
                )
        }
        function stopMove(obj){
            clearInterval(obj.timer);
        }
    </script>

方式二

 function startMove(obj,sx){
             stopMove(obj);
                obj.timer= setInterval(
                    function(){
                        if(300-obj.offsetLeft<sx){//看起来比较自然
                              stopMove(obj);
                              obj.style.left=300+'px';
                        }else{
                          obj.style.left=obj.offsetLeft+sx+'px';  
                        }
                        
                    },10
                )
        }

 方式三

function startMove(obj,sx){
           if(obj.offsetLeft>300){
            sx=-sx;
           }
             stopMove(obj);
                obj.timer= setInterval(
                    function(){
                        if(Math.abs(300-obj.offsetLeft)<Math.abs(sx)){//看起来比较自然,此时实现的是匀速运动
                              stopMove(obj);
                              obj.style.left=300+'px';
                        }else{
                          obj.style.left=obj.offsetLeft+sx+'px';  
                        }
                        
                    },10
                )
        }

缓冲运动

function startMove(obj){
             stopMove(obj);
            obj.timer= setInterval(
                function(){
                    if(300-obj.offsetLeft==0){//其实不加这个条件物体也可以停下来,因为(300-obj.offsetLeft)会有等于0的时候,但是不加条件,定时器会一直的被调用
                            stopMove(obj);
                    }else{
                        var s=(300-obj.offsetLeft)/7;
                        var sx=s>0?Math.ceil(s):Math.floor(s);
                        obj.style.left=obj.offsetLeft+sx+'px';
                        console.log(sx);
                    }
                    
                },10
            )
        }