1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. }
  11. #div1 {
  12. width: 100px;
  13. height: 100px;
  14. background-color: red;
  15. position: absolute;
  16. left: 600px;
  17. top: 50px;
  18. }
  19. #div2 {
  20. width: 1px;
  21. height: 300px;
  22. position: absolute;
  23. left: 300px;
  24. top: 0;
  25. background-color: black;
  26. }
  27. </style>
  28. <script>
  29. function startMove() {
  30. var oDiv = document.getElementById(\'div1\');
  31. setInterval(function () {
  32. var speed = (300 - oDiv.offsetLeft) / 10;
  33. //speed = Math.ceil(speed);//向上取整
  34. speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//判断是否大于0, 向上or向下取整;
  35. oDiv.style.left = oDiv.offsetLeft + speed + \'px\';
  36. document.title = oDiv.offsetLeft + \',\' + speed;
  37. }, 30);
  38. }
  39. </script>
  40. </head>
  41. <body>
  42. <input type="button" value="开始运动" onclick="startMove()">
  43. <div id="div1"></div>
  44. <div id="div2"></div>
  45. </body>
  46. </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. Apache配置rewrite

    最近将代码做了迁移,更换了web服务器,从原来的Nginx,换成使用Apache,多少有些区别.这里整理一下在apache下实现rewrite功能. 第一部分:修改apache配置文件支持rewrit ...

  2. C 产生随机码 (输入数字来产生)

    #include <stdio.h> #include <stdlib.h> main() { unsigned int seed; /*申明初始化器的种子,注意是unsign ...

  3. JavaWeb学习笔记--跳转方法小结

    服务端跳转:1. RequestDispatcher.forward()  public void doGet(HttpServletRequest request, HttpServletRespo ...

  4. 用js实现两个select下拉框之间的元素互相移动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. IOS 动画专题 --iOS核心动画

    iOS开发系列--让你的应用“动”起来 --iOS核心动画 概览 通过核心动画创建基础动画.关键帧动画.动画组.转场动画,如何通过UIView的装饰方法对这些动画操作进行简化等.在今天的文章里您可以看 ...

  6. 在 Windows 下部署 Go 语言环境

    http://bbs.chinaunix.net/thread-4088281-1-1.html 1. 首先下载官方二进制安装包:32 位选择 windows-386.msi64 位选择 window ...

  7. NOI2013 UOJ122 向量内积

    神题...... 还是大神讲得比较清晰~orz http://dffxtz.logdown.com/posts/197950-noi2013-vector-inner-product 启发题:poj3 ...

  8. cf492B Vanya and Lanterns

    B. Vanya and Lanterns time limit per test 1 second memory limit per test 256 megabytes input standar ...

  9. n%i之和

    题目:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1168 题意:给定一个n,注意这里n小于10^12,求 分析:早些时 ...

  10. javascript笔记6之函数

    /* function box() { //函数的声明 alert('我只有被调用才可以执行!'); //函数本身没有运行功能 } //必须调用才可以执行 box(); //调用 function b ...