1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Title</title>
    6. 

  6.     <style>
    7. 

  7.         * {
    8. 

  8.             margin: 0;
    9. 

  9.             padding: 0;
    10. 

  10.         }
    11. 

    12. 

  12.         #div1 {
    13. 

  13.             width: 100px;
    14. 

  14.             height: 100px;
    15. 

  15.             background-color: red;
    16. 

  16.             position: absolute;
    17. 

  17.             left: 600px;
    18. 

  18.             top: 50px;
    19. 

  19.         }
    20. 

    21. 

  21.         #div2 {
    22. 

  22.             width: 1px;
    23. 

  23.             height: 300px;
    24. 

  24.             position: absolute;
    25. 

  25.             left: 300px;
    26. 

  26.             top: 0;
    27. 

  27.             background-color: black;
    28. 

  28.         }
    29. 

  29.     </style>
    30. 

  30.     <script>
    31. 

  31.         function startMove() {
    32. 

  32.             var oDiv = document.getElementById(\'div1\');
    33. 

  33.             setInterval(function () {
    34. 

    35. 

  35.                 var speed = (300 - oDiv.offsetLeft) / 10;
    36. 

  36.                 //speed = Math.ceil(speed);//向上取整
    37. 

  37.                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//判断是否大于0， 向上or向下取整；
    38. 

  38.                 oDiv.style.left = oDiv.offsetLeft + speed + \'px\';
    39. 

  39.                 document.title = oDiv.offsetLeft + \',\' + speed;
    40. 

  40.             }, 30);
    41. 

  41.         }
    42. 

  42.     </script>
    43. 

  43. </head>
    44. 

  44. <body>
    45. 

  45. <input type="button" value="开始运动" onclick="startMove()">
    46. 

  46. <div id="div1"></div>
    47. 

  47. <div id="div2"></div>
    48. 

  48. </body>
    49. 

  49. </html>

16-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缓冲运动案例

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

  5. [Js]缓冲运动

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

  6. JS 缓冲运动 带运动的留言本 小案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

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

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

  8. js实现缓冲运动，和匀速运动有点不相同

    缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...

  9. js动画之缓冲运动

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

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

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

随机推荐

  1. pyqt5通过文本对话框打开文件

    点击按钮,打开文本对话框,找一人文件,打开并显示内容 QFIleDialog                                                              ...

  2. 部署在腾讯云的公益网站遭受了一次CC攻击

    版权声明:本文由黄希彤  原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/651089001483090830 来源:腾云阁 ...

  3. Spring MVC URL传参

    Spring MVC 学习 之 - URL参数传递   在学习 Spring Mvc 过程中,有必要来先了解几个关键参数:    @Controller: 在类上注解,则此类将编程一个控制器,在项目启 ...

  4. Android 之 Window、WindowManager 与窗口管理

    其实在android中真正展示给用户的是window和view,activity在android中所其的作用主要是处理一些逻辑问题,比如生命周期的管理.建立窗口等.在android中,窗口的管理还是比 ...

  5. 磁珠(FB)的选用

    1. 磁珠(FB)的单位是欧姆,而不是亨特,这一点要特别注意.因为磁珠的单位是按照它在某一频率 产生的阻抗来标称的,阻抗的单位也是欧姆.磁珠的 DATASHEET上一般会提供频率和阻抗的特性曲线图,一 ...

  6. 分享注册AltiumDesignerLive官网账号注册方法教程

    在Altium中国注册Live账号时,Altium会要求填写一些个人信息来申请账号提交账号后,等很长一段时间都没有得到回复.于是选择另一种方法注册打开Altium在俄罗斯的网址 http://ru.a ...

  7. RedisTemplate

    Spring Boot中Jedis几个api返回值的确认 @RequestMapping("/del/{key}") public String del(@PathVariable ...

  8. 【转】Service Intent must be explicit的解决方法

    原文网址:http://blog.csdn.net/shenzhonglaoxu/article/details/42675287 今天在学习android的Service组件的时候,在Android ...

  9. hdu1573：数论，线性同余方程组

    题目大意: 给定一个N ,m 找到小于N的  对于i=1....m,满足  x mod ai=bi  的 x 的数量. 分析 先求出 同余方程组 的最小解x0,然后 每增加lcm(a1...,am)都 ...

  10. Hive 6、Hive DML(Data Manipulation Language)

    DML主要是对Hive 表中的数据进行操作的(增 删 改),但是由于Hadoop的特性,所以单条的修改.删除,其性能会非常的低所以不支持进行级操作: 主要说明一下最常用的批量插入数据较为常用的方法: ...