缓冲运动和匀速运动有点不同，看图可以知道缓冲运动速度是越来越慢的。

 <style>

   *{

     padding:0;

     margin:10px 0;

   }

     #div1{

           height:100px;

           width:100px;

           background:green;

           float:left;

           position:relative;

           left:1000px;

     }

     #div2{

         border-left:1px solid black;

         position:absolute;

         height:200px;

         left:600px;

         float:left;

     }

 </style>

 <body>

 <div id="div1"></div>

 <div id="div2"></div>

 </body>

首先定义两个div，一个div只看见一条边，另外一个做运动

js代码如下，带注释

<script>

    var i=setInterval(function startMove ()

    {

        var div1=document.getElementById("div1");

        var speed=(600-div1.offsetLeft)/30;  //首先获取速度，因为div1。offsetleft=1000，所以此速度为负数

        speed=speed>0?Math.ceil(speed):Math.floor(speed);  //将速度上下取整，像素没有小数

        div1.style.left=div1.offsetLeft+speed+'px';  //因为速度为负数，所以offsetleft越来越小，向左运动

        if (div1.offsetLeft==600)   //当达到div2的边时停止运动

        {

          clearInterval(i);

        }

    }

, 30)

</script>

js实现缓冲运动，和匀速运动有点不相同的更多相关文章

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

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

  2. js动画之缓冲运动

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

  3. [Js]缓冲运动

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

  4. js缓冲运动

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

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

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

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

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

  7. JS缓冲运动案例

    点击"向右"按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击"向右"#red区块也不会再运动.点击"向左"按钮 ...

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

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

  9. 点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)

    效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...

随机推荐

  1. Xcode真机测试could not find developer disk image解决方法（支持iOS9.2）

    这个问题开发者经常碰到,因为当我们更新手机iOS版本的时候,可能我们开发人员因为项目的需要等原因并一定愿意更新xcode到最新版本.但是老版本的xcode极有可能不支持最新的iOS版本,也有一些旧的i ...

  2. UVA 208 (DFS)

    题意:找出1到T的所有路径: 坑点:一开始以为是到终点,读错了题意,没测试第二个样例,结果WA了4遍,坑大了: #include <iostream> #include <cmath ...

  3. iOS运行时工具-cycript

    cycript是大神saurik开发的一个非常强大的工具,可以让开发者在命令行下和应用交互,在运行时查看和修改应用.它确实可以帮助你破解一些应用,但我觉得这个工具主要还是用来学习其他应用的设计(主要是 ...

  4. 去除Input输入框中边框的方式

    我们在做制作注册页面时,经常会需要消除Input带来的边框,这时候我们需要用到两个属性 一个是input在非激活状态下,不现实边框,代码规则为 border:none:同时当鼠标移到input输入框上 ...

  5. python学习：函数的学习

    我们写东东的时候,往往有一些东西要频繁去复用,那么每个功能是10行代码,复用2次就是20行,这样看来我们的程序如果频繁利用某些代码的话,那么会是我们开发的东西越来越臃肿.那么好的方法有没有呢,那就是函 ...

  6. ubuntu 常用命令

    此处为使用ubuntu中常用的命令,不会全面深入讲解命令,仅供日常使用查看,以备遗忘. 不定时更新! 1.远程传输文件(小文件) scp [user@源文件地址:/目录/.../file] [目的地址 ...

  7. 摘要评注The Cathedral & The Bazaar

    2013年暑期买到这本书,距离其第一版已经有14年之久,而最早发布在互联网上的文章更是早在1997年.在我阅读的时候,很多事迹已经沉积为历史,很多预言已经成为现实.而这本书的意义却丝毫没有因此淡化,反 ...

  8. LintCode Binary Tree Inorder Traversal

    Binary Tree Inorder Traversal Given a binary tree, return the inorder traversal of its nodes' values ...

  9. include指令和include标签的区别

    区别 类别 语法 发生作用时间 包含的内容 转化成Servlet 编译时间 运行时间 include指令 <%@ include file="" %> 页面交换 实际内 ...

  10. for循环相关

    循环语句是指令式编程的常见语句,Scala对其加以改进,成为适应函数式风格的利器. for循环中的变量,没有val或者var,是因为变量的类型,完全是集合中的元素的类型.作用域持续到括号结束. 在sc ...