点击“向右”按钮，红色的#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. Python数据类型---数值类型

    一.整数(Integer)简称Int,又称整型,由正整数.负整数.0构成,不包括小数,分数. a,b=1,2 #一种赋值方法,此时a=1,b=2 print(a+b) #加法 3 print(a-b) ...

  2. 多测师讲解requests __介绍_高级讲师肖sir

    我们今天讲解的内容 一.什么是Requests? Requests是用Python语言编写的简单易用的HTTP库,用来做接口测试的库. 二.安装requests库 1.按住Windows标志+r,在运 ...

  3. 基于Python的接口自动化实战-基础篇之读写配置文件

    引言 在编写接口自动化测试脚本时,有时我们需要在代码中定义变量并给变量固定的赋值.为了统一管理和操作这些固定的变量,咱们一般会将这些固定的变量以一定规则配置到指定的配置文件中,后续需要用到这些变量和变 ...

  4. swoole协程通道channel

    swoole 协程通道 为了协程直接互相通讯传递数据 和go的通道很相似 Co\run(function(){ $chan = new Swoole\Coroutine\Channel(1); Swo ...

  5. spring boot:使用async异步线程池发送注册邮件(spring boot 2.3.1)

    一,为什么要使用async异步线程池? 1,在生产环境中,有一些需要延时处理的业务场景: 例如:发送电子邮件, 给手机发短信验证码 大数据量的查询统计 远程抓取数据等 这些场景占用时间较长,而用户又没 ...

  6. centos8平台使用strace跟踪系统调用

    一,strace的用途 strace  是最常用的跟踪进程系统调用的工具. 说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectfore ...

  7. JSONObject与JSONArray,转换为字符串

    public class TestArrayToList { public static void main(String[] args) { // TODO Auto-generated metho ...

  8. C++实现求离散数学命题公式的真值表

    一.实验内容 (1)求任意一个命题公式的真值表. (2)利用真值表求任意一个命题公式的主范式. (3)利用真值表进行逻辑推理. 注:(2)和(3)可在(1)的基础上完成. 二.实验目的 真值表是命题逻 ...

  9. Docker启动Mysql镜像

    date: 2020-03-14 17:00:00 updated: 2020-03-14 18:00:00 Docker启动Mysql镜像 管理员权限!!! docker run -p 3306:3 ...

  10. 支持向量机SVM基本问题

    1.SVM的原理是什么? SVM是一种二类分类模型.它的基本模型是在特征空间中寻找间隔最大化的分离超平面的线性分类器.(间隔最大是它有别于感知机) 试图寻找一个超平面来对样本分割,把样本中的正例和反例 ...