点击“向右”按钮，红色的#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>

　　

参考代码：

    window.onload = function () {

      var oDiv = document.getElementById('red');

      var oBtn = document.getElementById('btn');

      var oBtnLeft = document.getElementById('btn-left');

      var timer = null;

      function startMove(iTarget) {

        clearInterval(timer);

        timer = setInterval(function () {

          var speed = (iTarget - oDiv.offsetLeft) / 30;

          speed=speed>0?Math.ceil(speed):Math.floor(speed);

          if (oDiv.offsetLeft == iTarget) {

            clearInterval(timer)

          } else {

            oDiv.style.left = oDiv.offsetLeft + speed + 'px';

          }

        }, 30)

      }

      oBtn.onclick = function () {

        startMove(700);

      }

      oBtnLeft.onclick = function () {

        startMove(200);

      }

    }

　　

JS缓冲运动案例的更多相关文章

  1. JS缓冲运动案例：右侧居中悬浮窗

    JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...

  2. JS缓冲运动案例：右下角悬浮窗

    JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...

  3. js缓冲运动

    缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度＝(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...

  4. [Js]缓冲运动

    一.运动框架 1.在开始运动时,关闭已有定时器(否则会不断有新的定时器执行) 2.把运动和停止隔开(if/else) 二.缓冲运动 逐渐变慢,最后停止(距离越远速度越大) 速度=(目标值-当前值)/缩 ...

  5. JS 缓冲运动 带运动的留言本 小案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  7. js实现缓冲运动，和匀速运动有点不相同

    缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...

  8. js动画之缓冲运动

    缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...

  9. JS运动基础(二) 摩擦运动、缓冲运动

    摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...

随机推荐

  1. UIScrollView无法滚动以及超出屏幕的内容无法进行编辑

    通过UITextView实现简单的富文本内容编辑,功能按钮包装时遇到些问题,简单记录如下 1.通过UIToolbar将字体设置功能罗列出来,由于功能过多,通过UIScrollView进行滑动控制 1) ...

  2. 重装Windows系统 入门详解 - 基础教程

    重装Windows系统 入门详解 - 基础教程 JERRY_Z. ~ 2020 / 10 / 13 转载请注明出处!️ 目录 重装Windows系统 入门详解 - 基础教程 一.说明 二.具体步骤 ( ...

  3. chrome文件上传 /获取文件路径c:/fakepath的解决办法

    jsp页面 <td style="text-align: left;padding-left: 20px;"> <img name="image&quo ...

  4. 多测师讲解自动化测试 _接口面试题（001）_高级讲师肖sir

    1.为什么要做接口测试(必要性)1.可以发现很多在页面上操作发现不了的bug2.检查系统的异常处理能力3.检查系统的安全性.稳定性4.前端随便变,接口测好了,后端不用变5.可以测试并发情况,一个账号, ...

  5. day40 Pyhton 并发编程03

    一.内容回顾 进程是计算机中最小的资源分配单位 进程与进程之间数据隔离,执行过程异步 为什么会出现进程的概念? 为了合理利用cpu,提高用户体验 多个进程是可以同时利用多个cpu的,可以实现并行的效果 ...

  6. web自动化测试总结

    web自动化: 1.测试用例(操作步骤,熟读需求文档,web项目先用手工研究,前置条件,预期结果) 接口自动化测试中数据功能最适合作为数据驱动,数据放在excel中需要操作excel 为什么web自动 ...

  7. 【循环矩阵乘优化DP】BZOJ 2510 弱题

    题目大意 有 \(M\) 个球,一开始每个球均有一个初始标号,标号范围为 \(1\) - \(N\) 且为整数,标号为 \(i\) 的球有 \(a_i\) 个,并保证 \(\sum a_i = M\) ...

  8. 【树】HNOI2014 米特运输

    题目大意 洛谷链接 给出一课点带权的树,修改一些点的权值使该树满足: 同一个父亲的儿子权值必须相同 父亲的取值必须是所有儿子权值之和 输入格式 第一行是一个正整数\(N\),表示节点的数目. 接下来\ ...

  9. spring boot:用dynamic-datasource-spring-boot-starter配置多数据源访问seata(seata 1.3.0 / spring boot 2.3.3)

    一,dynamic-datasource-spring-boot-starter的优势? 1,dynamic-datasource-spring-boot-starter 是一个基于springboo ...

  10. 第十四章 Linux三剑客之老大—awk

    一.awk # 擅长取列 计算 数组 函数 编程语言 内部命令 内部变量 NR #行号 $0 #完整的一行内容 $n # n 是数字 表示取出第几列 多列用逗号分割 -F  #FS 分隔符的变量 NF ...