js运动-运动缓冲

来源：互联网发布：新闻网站源码手机版编辑：程序博客网时间：2024/04/29 01:23

    <style>            *{margin: 0;padding: 0;}            #div1{width: 200px;height: 200px;margin:50px 0;position: absolute;background: red;left: 0px; }            #div2{width: 1px;height: 500px;margin: 0 600px;background: black;}        </style>        <script>            window.onload=function()            {                var oIpt=document.getElementById('ipt1');                var oDiv=document.getElementById('div1');                var oDiv1=document.getElementById('div2');                var timer=null;                oIpt.onclick=function ()                {                    clearInterval(timer);                    timer=window.setInterval(function(){                        var speed=(600-oDiv.offsetLeft)/10;                    //不同方向的缓冲运动要对速度向上或向下取整，否则不会定点到目的地                       speed=speed>0?Math.ceil(speed):Math.floor(speed);                        oDiv.style.left=oDiv.offsetLeft+speed +'px';                        document.title=oDiv.offsetLeft;                                             },30);                };            }        </script>    </head>    <body>        <input id="ipt1" type="button" value="开始" />        <div id="div1"></div>        <div id="div2"></div>    </body></html>

//距离越远，速度越大 var speed=(600-oDiv.offsetLeft)/10;
//当speed为小数的时候，例如speed=0.9时，系统则自动取speed=0；speed=-0.9时，取speed=0,所以需要对不同方向取不同的取整

0 0