点击“向右”按钮，红色的#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. rxjs入门4之rxjs模式设计

    观察者模式 (Observer Pattern) 观察者模式其实在日常编码中经常遇到,比如DOM的事件监听,代码如下 function clickHandler(event) { console.lo ...

  2. [转载]volitale关键字详解

    来看这个代码: int fun(int& a) { int b = a; int c = a; return a+b+c; } int main() { int a=1; //........ ...

  3. Struts2 学习记录-第一天

    Struts2 -01 struts2框架认识 struts2框架是web层框架.struts2框架=webwork+strut1框架发展过来的.struts2框架设计主要用到技术:通过过滤器进行请求 ...

  4. 题解：SDOI2017 新生舞会

    题解:SDOI2017 新生舞会 Description 学校组织了一次新生舞会,Cathy 作为经验丰富的老学姐,负责为同学们安排舞伴. 有 \(n\) 个男生和 \(n\) 个女生参加舞会.一个男 ...

  5. 习题3-3　数数字（Digit Counting , ACM/ICPC Danang 2007, UVa1225）

    #include<stdio.h> #include<string.h> int main() { char s[100]; scanf("%s",s); ...

  6. Jmeter之参数化函数助手__randomstring

    1.Tools->函数助手对话框,选择__Random String,2表示随机生成的字符长度:3表示从哪些字符中随机生成:然后点击生成,得到对应的变量: 5中372表示该函数随机生成的字符串, ...

  7. <!DOCTYPE>，<address>，<applet>的用法

    希望以下内容能让大家有所收获 HTML <!DOCTYPE> 标签 实例 <!DOCTYPE html> <html> <head> <title ...

  8. cookie和session可以参考的文章

    cookie和session可以参考的文章 cookie:http://www.lemfix.com/topics/5session:https://www.cnblogs.com/nickjiang ...

  9. 对象部分初始化：原理以及验证代码（双重检查锁与volatile相关）

    对象部分初始化:原理以及验证代码(双重检查锁与volatile相关) 对象部分初始化被称为 Partially initialized objects / Partially constructed ...

  10. Centos 7 firewall 命令

    Centos 7 firewall 命令: 查看已经开放的端口: firewall-cmd --list-ports 开启端口 firewall-cmd --zone=public --add-por ...