JS缓冲运动案例

最新推荐文章于 2021-12-30 11:00:44 发布

请叫我二狗哥

最新推荐文章于 2021-12-30 11:00:44 发布

阅读量227

点赞数

分类专栏： Javascript 文章标签： js 缓冲运动案例

cnblog博客：https://www.cnblogs.com/f6056/

本文链接：https://blog.csdn.net/weimob258616/article/details/98048920

版权

Javascript 专栏收录该内容

57 篇文章 3 订阅

订阅专栏

本文介绍了一个使用JavaScript实现的缓冲运动案例。通过点击‘向右’和‘向左’按钮，红色区块会进行缓冲运动，到达预设位置后自动停止，并且在再次点击按钮时不会重复运动。详细代码参考作者的cnblogs文章。

摘要由CSDN通过智能技术生成

点击“向右”按钮，红色的#red区块开始向右缓冲运动，抵达到黑色竖线位置自动停止，再次点击“向右”#red区块也不会再运动。点击“向左”按钮，红色的#red区块开始向左缓冲运动，抵达到蓝色竖线位置自动停止，再次点击“向左”#red区块也不会再运动。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>JS小案例：循环变色的区块</title>
  <style>
    #red {
      width: 200px;
      height: 200px;
      background: red;
      position: absolute;
      top: 50px;
      left: 200px;
    }


    .black {
      position: absolute;
      width: 1px;
      height: 200px;
      left: 900px;
      background: black;
      top: 50px;

    }

    .blue {
      position: absolute;
      width: 1px;
      height: 200px;
      left: 200px;
      background: blue;
      top: 50px;

    }
  </style>
  <script>

//补充代码

  </script>
</head>

<body>

  <input type='button' value='向右' id='btn' />
  <input type='button' value='向左' id='btn-left' />
  <div id='red'></div>
  <div class='black'></div>
  <div class='blue'></div>
</body>

</html>

参考代码见我的cnblogs:JS缓冲运动案例

请叫我二狗哥

关注

0
点赞
踩
0

收藏

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

点击“向右”按钮，红色的#red区块开始向右缓冲运动，抵达到黑色竖线位置自动停止，再次点击“向右”#red区块也不会再运动。点击“向左”按钮，红色的#red区块开始向左缓冲运动，抵达到蓝色竖线位置自动停止，再次点击“向左”#red区块也不会再运动。<!DOCTYPE html><html lang="zh-CN"><head> <...
复制链接

扫一扫

专栏目录