点击“向右”按钮，红色的#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. shell-脚本开发基本规范及习惯

    1.shell-脚本开发基本规范及习惯 1.开头指定脚本解析器 #!/bin/sh 或#!/bin/bash 2.开头加版本版权等信息 #Date: 2018/3/26 #Author: zhangs ...

  2. 原生tab选项卡

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 多测师讲解接口测试 _理论基础知识001_高级讲师肖sir

    前言: 我们今天进入接口测试的学习! 今天学习的内容是偏向理论 接口理论 了解接口测试(1) 一.什么是接口测试? 接口统称api,即程序与程序之间的对接.交接.交互.是测试系统组件间接口的一种测试. ...

  4. pytest文档49-命令行参数--tb的使用

    前言 pytest 使用命令行执行用例的时候,有些用例执行失败的时候,屏幕上会出现一大堆的报错内容,不方便快速查看是哪些用例失败. --tb=style 参数可以设置报错的时候回溯打印内容,可以设置参 ...

  5. 【迷宫问题】CodeForces 1292A A NEKO's Maze Game

    题目大意 vjudge链接 共两行,从(1,n)到(2,n). 每过一个时刻会有一个位置的状态变化,从能到达这个位置变成不能到达,或从不能到达变成能到达,问在每个时刻中是否能从起点到终点. 数据范围 ...

  6. 性能测试之JVM的故障排查-死锁

    死锁原因 Java发生死锁的根本原因是:在申请锁时发生了交叉闭环申请.即线程在获得了锁A并且没有释放的情况下去申请锁B,这时,另一个线程已经获得了锁B,在释放锁B之前又要先获得锁A,因此闭环发生,陷入 ...

  7. 56.Qt-滚动字幕之无间隙滚动(原创)

    1.描述 最近要实现一个滚动条字幕,但是搜到的系列文章都是利用定时器QTimer,在固定的时间截取文本并显示,这样滚动的时候其实是断断续续的,因为实际上是一个个字符位移实现的,不过实现方便. 所以只有 ...

  8. 【应用服务 App Service】App Service中上传文件/图片(> 2M)后就出现500错误(Maximum request length exceeded).

    问题描述 在使用App Service (Windows)做文件/图片上传时候,时常遇见上传大文件时候出现错误,这是因为IIS对文件的大小由默认限制.当遇见(Maximum request lengt ...

  9. Redis---02Redis的Java客户端

    一.注意 连接Linux里面安装的Redis,需要执行以下步骤: ①禁用防火墙(CentOS 7):systemctl stop firewalld.service ②在redis.conf中注释掉 ...

  10. vue封装tab切换

    vue封装tab切换 预览: 第一种 通过父传子标题,子传父事件 子组件 <template> <div class='app'> <div class="ta ...