点击“向右”按钮，红色的#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. day25 Pyhton学习 约束和异常处理

    一.类的约束 约束是对类的约束 有两种方法: 1.提取一个父类,在父类中给出一个方法,并且在方法中不给出任何代码,直接抛异常 class Base: def login(self): raise Ex ...

  2. GCC编译选项笔记

    警告选项 -Wall:开启大多数的警告信息 -Wextra:开启额外的警告信息,比如参数未使用警告(-Wunused-parameter) -Werror:将警告当作错误,中断编译 优化选项 -O,- ...

  3. 第一章 Linux操作系统及其历史介绍

    一.什么是操作系统 1.基本含义: 简称OS 是计算机系统中必不可少的基础系统软件,是应用程序运行和用户操作必备的基础环境 操作系统就是一个人与计算机之间的中介 2.组成方式: 操作系统的组成: 计算 ...

  4. 推荐4款个人珍藏的IDEA插件！帮你写出不那么差的代码

    @ 目录 Codota:代码智能提示 代码智能补全 代码智能搜索 Alibaba Java Code Guidelines:阿里巴巴 Java 代码规范 手动配置检测规则 使用效果 CheckStyl ...

  5. python第三章：函数

    在前面章节中,介绍了一些input(),print(),len()等内建函数,还有random,math等标准库相关函数,这些都是可以直接使用的,但是很多时候,我们也是可以编写自己的函数. 看个例子: ...

  6. 在centos下启动nginx出现Failed to start nginx.service:unit not found

    错误的原因就是没有添加nginx服务,所以启动失败. 解决方法: 1.    在/root/etc/init.d/目录下新建文件,文件名为nginx 或者用命令在根目录下执行:# vim /etc/i ...

  7. Ⅱ Finite Markov Decision Processes

    Dictum:  Is the true wisdom fortitude ambition. -- Napoleon 马尔可夫决策过程(Markov Decision Processes, MDPs ...

  8. Vue-cli3以上安装jquery

    vue-cli3以上就没有webpack.config.js这个文件了,所以在安装jquery时 终端执行  npm install jquery --save 之后查看package.json 安装 ...

  9. Java中的微信支付（1）：API V3版本签名详解

    1. 前言 最近在折腾微信支付,证书还是比较烦人的,所以有必要分享一些经验,减少你在开发微信支付时的踩坑.目前微信支付的API已经发展到V3版本,采用了流行的Restful风格. 今天来分享微信支付的 ...

  10. 《JavaScript高级程序设计》——第一章JavaScript简介

    第一章主要讲了JavaScript的诞生和发展.刚刚接触JavaScript的我,似乎对这些内容并不感兴趣,快速看了一遍就开始去看第二章了. 看完第一章,收获也就是了解到JavaScript由ECMA ...