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

 <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. UltraISO制作大于4G文件的光盘映像可启动U盘

    1.使用常规方法 制作 u盘启动 启动-->写入硬盘映像-->写入 2.制作成功后U盘 是FAT32格式 对于FAT32文件系统,其缺点不能存储超过4G的文件,而对于NTFS文件系统,则没 ...

  2. iOS 自定义emoji表情键盘

    之前走了很多弯路,包括自己定以emoji表情,自己创建view类去处理图文混排 ,当把这些焦头烂额的东西处理完了才发现 ,其实系统自带键盘是如此的方便,iOS 系统自带的表情在view,textfie ...

  3. reverse-daily(1)-audio_visual_receiver_code

    本人第一篇随笔,就以一篇CTF逆向分析的文章开始吧! 链接:http://pan.baidu.com/s/1eS6xFIa 密码:u14d 因为re的分析比较琐碎,所以主要就挑一些重点东西来说. 据说 ...

  4. Windows下利用py2exe生成静默运行的命令行程序

    py2exe是python的第三方库,可以利用它将你的python脚本编译成可执行文件(exe),而在实际的开发过程中生成的dos窗口很影响用户体验,建议按以下方式让exe静默运行. 首先将你的pyt ...

  5. vmware12用 unlocker206能不能解锁 OS X系统

    先下载UnLocker2061.zip 2. 选择虚拟机右键--> 属性 3.将下载的unlocker2061解压后文件放入VMware安装目录下  选择win-install.cmd文件  右 ...

  6. LINUX下如何开启FTP服务器

    1.首先应开启linuxh环境下的FTP service,过程如下:   http://www.witech.com.cn/news/Article_Show.asp?ArticleID=48    ...

  7. sublime text3 快捷键设置

    //插入到key binding user 里面,浏览器安装路径修改成自己的路径 1[ //firefox测试快捷键 { "keys":["f3"], &quo ...

  8. ups机制下停电提前关闭oracle数据库

    思路:在一个受ups保护的机器A1上写脚本,几分钟(如半分钟)ping不在ups保护的机器B,如果几次(如5次)ping不同,这时我们认为将要停电,此时脚本执行正常关闭受ups保护的机器上数据库的命令 ...

  9. phpwind之关闭账号通

    phpwind的账号通功能早就失效了,但是首页的链接一直存在,造成了很不好的影响 但是后台打开账号通功能又打不开,所以想到了在前端的模板中通过屏蔽这部分代码的方法隐藏掉这个功能在首页的显示 1.打开/ ...

  10. AndroidStudio 中的坑Error:(1, 0) Plugin is too old, please update to a more recent version, or set ANDROID_DAILY_OVERRID

    将 build.gradle 中 的 classpath改为2.0.+ dependencies { classpath 'com.android.tools.build:gradle:2.0.+'然 ...