缓冲运动

最新推荐文章于 2022-07-12 13:11:05 发布

Apress92

最新推荐文章于 2022-07-12 13:11:05 发布

阅读量235

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/bin1813/article/details/53513093

版权

javascript 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
      div{
         width:100px;
         height:100px;
         background-color:red;
         position:absolute;
         left:500px;
         height:100px;;
      }
   </style>
</head>
<body>
   <script>
      //逐渐变慢
//    越接近终点，速度越小
//    距离越小，速度越小
//    距离越大，速度越大
      window.onload=function () {
        var timer=null;
        function startMove(target) {
            clearInterval(timer);
            var oDiv=document.getElementById('div');
            timer=setInterval(function () {
                var speed=(target-oDiv.offsetLeft)/8;
//                if(speed>0){
//                    speed=Math.ceil(speed);
//          }else{
//                    speed=Math.floor(speed);
//          }
            speed=speed>0?Math.ceil(speed):speed=Math.floor(speed);
                if(oDiv.offsetLeft==target){  //是否到达终点
                    clearInterval(timer);  //到达终点后
                }else{
                    oDiv.style.left=oDiv.offsetLeft+speed+'px';//到达终点前
                }
            },30)
        }
        var oInput=document.getElementById('button');
        oInput.addEventListener('click',function(){
            startMove(300);
      },false)
      }

   </script>
   <input type="button" id="button" value="开始移动">
   <div id="div"></div>
   <span style="width:1px;height:300px;position:absolute;left:300px;top:0;background:black;"></span>
</body>
</html>

Apress92

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
缓冲运动

html>html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style> div{ width:100px; height:100px; background-color:red; position:absolute
复制链接

扫一扫