JS运动——缓冲运动

最新推荐文章于 2022-02-28 16:48:42 发布

曲奇小姐

最新推荐文章于 2022-02-28 16:48:42 发布

阅读量131

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_41586886/article/details/80684345

版权

Javascript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>缓冲运动——逐渐变满，直到最后停下</title>
    <style>
    #div1{
      width: 200px;
      height: 200px;
      position: absolute;
      top: 100px;
      left: 600px;
      background: pink;
    }
    .div2{
      width: 2px;
      height: 600px;
      position: absolute;
      left:300px;
      background: black;
    }
    </style>
    <script type="text/javascript">
    window.οnlοad=function(){
      var oDiv=document.getElementById('div1');
      startMove();

    }
    function startMove(){
      var oDiv=document.getElementById('div1');
      var oBtn=document.getElementById('btn');
      var timer=null;

      oBtn.οnclick=function(){
        var speed=0;
        timer=setInterval(function(){
          speed=(300-oDiv.offsetLeft)/10;
          //这里可能会得到小数，但是如果带上px这个单位，系统会自动删除小数点之后的数值，比如9.9px
          //会变成9px
          if(speed>0){
            speed=Math.ceil(speed);  //如果速度大于0，向上取整,比如是0.9，那么就要变成1
          }else{
            speed=Math.floor(speed); //如果速度小于0，向下取整，比如是-0.9，那么就要变成-1
          }
          oDiv.style.left=oDiv.offsetLeft+speed+'px';
        },30)
      }
    }
    </script>
  </head>
  <body>
    <div id='div1'></div>
    <div class='div2'></div>
    <button type="button" name="button" id='btn'>点我就走</button>
  </body>
</html>

曲奇小姐

关注

0
点赞
踩
0

收藏

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

&lt;!DOCTYPE html&gt;&lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;缓冲运动——逐渐变满，直到最后停下&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫