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

 <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. Swift语言—常量、变量、类型赋值

    常量:常量在作用域内不能被赋值且不会发生改变,只读不写,每个常量都必须有唯一的名字和内存空间:关键字:let   变量:变量在作用区域内可以它的值可以被改变,可读可写可覆盖,每个常量都必须有唯一的名字 ...

  2. 理解OAuth 2.0(转载)

    作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html OAuth是一个关于授权(authorization)的开放网络标 ...

  3. BFC and Haslayout

    一.BFC(Block Formatting Context) 相关网址:http://www.cnblogs.com/dolphinX/p/3508869.html 1. 怎样才能形成BFC flo ...

  4. Counting Sequences_线段树***

    Description For a set of sequences of integers{a1,a2,a3,...an}, we define a sequence{ai1,ai2,ai3...a ...

  5. 修改mysql用户名密码 和 PHPmysqlAdmin对应密码修改

    本地的mysql运行时,可能会用到修改用户名密码: mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('输入新密码');不存在修改用户啊 ...

  6. html随记

    姓名输入框:<input type="text" value="默认有值"/> 密码输入框:<input type="text&qu ...

  7. GridView的DataFormatString格式化字符串

    DataFormatString="{0:格式字符串}" 0:代表字段本身 冒号后面的代表希望的格式 比如 {0:yyyy-MM-dd}  显示的时间类型就是2016-04-11 ...

  8. Shell 环境变量 & 参数变量

    环境变量 $HOME 当前用户的家目录 $PATH 以冒号分隔的用来搜索命令的目录列表 $PS1 命令提示符,通常是$字符,但在bash中,可以使用一些更复杂的值.例如,字符串[\u@\h \w]$就 ...

  9. Opencv读取视频

    CvCapture 是一个结构体,用来保存图像捕获所需要的信息. opencv提供两种方式从外部捕获图像 一种是从摄像头中, 一种是通过解码视频得到图像. 两种方式都必须从第一帧开始一帧一帧的按顺序获 ...

  10. AngularJS之手动加载模块app和controller

    使用ng的页面中一般都是使用模块自动加载,页面的结构一般是这样的 加载angularjs脚本 加载业务代码脚本(或者写在script标签中) html结构代码(带有ng指令) 就像这样 app.htm ...