写法和今天写的两个东西是一个框架的;

第一个基础框架,只是实现了运动的功能:

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1 {width: 100px;height:100px;background: red;position: absolute;top: 50px;left: 0;}
    </style>
    <script>
        function startMove(number){
            var oDiv=document.getElementById("div1");
            var speed=null;

            setInterval(function(){
                speed=(number-oDiv.offsetLeft)/10;//目标值减去当前的宽度,然后除10;如果想让速度快,减小分母就可以了;
                oDiv.style.left=oDiv.offsetLeft+speed+'px';
            },30)
        }
    </script>

</head>
<body>
<input type="button" value="Go" onclick="startMove(300)"/>
<div id="div1"></div>
</body>
</html>

测试下BUG;代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1 {width: 100px;height:100px;background: red;position: absolute;top: 50px;left: 0;}

#div2

   {width: 1px;height: 300px;background: black;position: absolute;top:0;left: 300px;}
    </style>
    <script>
        function startMove(number){
            var oDiv=document.getElementById("div1");
            var speed=null;

            setInterval(function(){
                speed=(number-oDiv.offsetLeft)/10;//目标值减去当前的宽度,然后除10;如果想让速度快,减小分母就可以了;
                oDiv.style.left=oDiv.offsetLeft+speed+'px';

document.title=oDiv.offsetLeft+”,”+speed

 //测试出来的结果是296,0.4;出现了浮点数;
            },30)
        }
    </script>
</head>
<body>
<input type="button" value="Go" onclick="startMove(300)"/>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

这里可以用向上/下取整的方法来

speed=

Math.ceil((number-oDiv.offsetLeft)/10);//

速度向上取整;

完整代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1 {width: 100px;height:100px;background: red;position: absolute;top: 50px;left: 0;}
        #div2   {width: 1px;height: 300px;background: black;position: absolute;top:0;left: 300px;}
    </style>
    <script>
        function startMove(number){
            var oDiv=document.getElementById("div1");
            var speed=null;

            setInterval(function(){
                speed=Math.ceil((number-oDiv.offsetLeft)/10);//速度向上取整;
                oDiv.style.left=oDiv.offsetLeft+speed+'px';
                document.title=oDiv.offsetLeft+","+speed //测试出来的结果是296,0.4;出现了浮点数;
            },30)
        }
    </script>
</head>
<body>
<input type="button" value="Go" onclick="startMove(300)"/>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

虽然从左到右边可以正常了,然后从右往左如果向上取整的话,又不正常了,如果div初始位置在600px的位置,需要向下取整的,这时候可以用if语句来弄;为了方便,可以用三元运算符来写:

speed=speed>0?Math.ceil((number-oDiv.offsetLeft)/10):Math.floor((number-oDiv.offsetLeft)/10)

;//三目运算符做判断,如果速度为证,则向上。如果是负数,则向下;

完整版的如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1 {width: 100px;height:100px;background: red;position: absolute;top: 50px;left: 600px;}
        #div2   {width: 1px;height: 300px;background: black;position: absolute;top:0;left: 300px;}
    </style>
    <script>
        function startMove(number){
            var oDiv=document.getElementById("div1");
            var speed=null;

            setInterval(function(){
                //speed=Math.ceil((number-oDiv.offsetLeft)/10);//速度向上取整;
                speed=speed>0?Math.ceil((number-oDiv.offsetLeft)/10):Math.floor((number-oDiv.offsetLeft)/10);//三目运算符做判断,如果速度为证,则向上。如果是负数,则向下;
                oDiv.style.left=oDiv.offsetLeft+speed+'px';
                document.title=oDiv.offsetLeft+","+speed //测试出来的结果是296,0.4;出现了浮点数;
            },30)
        }
    </script>
</head>
<body>
<input type="button" value="Go" onclick="startMove(300)"/>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

总结:只要用到缓存运动,一定要做取整处理,否则会出事的;

 

·····