1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <title></title>
  7.      <style>
  8.          #div1{width:100px;height:100px;background: red;position:absolute;left:30px;top:50px; border-radius: 50px;}
  9.             </style>
  10.      <script type="text/javascript">
  11.          window.onload = function () {
  12.              var oBtn1 = document.getElementById('btn1');
  13.              var oBtn2 = document.getElementById('btn2');
  14.              var oDiv = document.getElementById('div1');
  15.  
  16.              oBtn1.onclick = function () {
  17.                  doMove(oDiv, -12, 10); // 直接就回到原点，原因是没判断大于小于号
  18.              }
  19.  
  20.              oBtn2.onclick = function () {
  21.                  doMove(oDiv, 12, 800);
  22.              }
  23.  
  24.              // obj--移动对象，dir--方向，target--目标点
  25.              function doMove(obj, dir, target) {
  26.                  clearInterval(obj.timer);
  27.                  obj.timer = setInterval(function () {
  28.                      var speed = parseInt(getStyle(obj, 'left')) + dir;
  29.                      if (speed > target && dir > 0) { // 往前跑
  30.                          speed = target;
  31.                      }
  32.  
  33.                      if (speed < target && dir < 0) { // 往后跑
  34.                          speed = target;
  35.                      }
  36.                      obj.style.left = speed + 'px'
  37.                      if (speed == target) {
  38.                          clearInterval(obj.timer);
  39.                      }
  40.                  }, 30)
  41.              }
  42.  
  43.              function getStyle(obj, attr) {
  44.                  return getComputedStyle(obj)[attr];
  45.              }
  46.          }
  47.      </script>
  48.  </head>
  49.  
  50.  <body>
  51.      <input id="btn1" type="button" value="向前">
  52.      <input id="btn2" type="button" value="向后">
  53.      <div id="div1"></div>
  54.  </body>
  55.  
  56.  </html>

obj--移动对象，dir--方向，target--目标点

 

JavaScript div 上下运动实例的更多相关文章

  1. 关于javascript中静态成员和实例成员的详细解释

    关于javascript中静态成员和实例成员的详细解释  在我们了解什么是静态成员和实例成员之前,我们首先来了解一下什么是实例? 实例就是由构造函数创建出来的对象. 例如案例中 p 就是实例: fun ...

  2. javascript链式运动框架案例

    javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...

  3. javascript多物体运动案例：多物体淡入淡出

    javascript多物体运动案例:多物体淡入淡出 任务描述: 补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度. 效果图: < ...

  4. JavaScript学习11 数组排序实例

    JavaScript学习11 数组排序实例 数组声明 关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...

  5. div均匀分布代码实例

    多个div在同一行以相同间隔分布: 这样的布局效果使用非常的频繁,也就是让多个div在一行分布,并且div于div之间的间隙是一样的,多用在对于产品的展示之用,下面就介绍一下如何实现此中布局,代码实例 ...

  6. JavaScript基础12——运动

    运动原理 运动的原理:      让某件物品沿着某种方向随着时间的变化改变位置 setInterval(function(){ obox.style.left = obox.offsetLeft+10 ...

  7. javascript常用经典算法实例详解

    javascript常用经典算法实例详解 这篇文章主要介绍了javascript常用算法,结合实例形式较为详细的分析总结了JavaScript中常见的各种排序算法以及堆.栈.链表等数据结构的相关实现与 ...

  8. javascript每日一练（十三）——运动实例

    一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  9. Javascript单例模式概念与实例

    前言 和其他编程语言一样,Javascript同样拥有着很多种设计模式,比如单例模式.代理模式.观察者模式等,熟练运用Javascript的设计模式可以使我们的代码逻辑更加清晰,并且更加易于维护和重构 ...

随机推荐

  1. ExtJs之Ext.XTemplate:数组填充，访问父对象

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  2. [Design]制作磨砂效果

    比较适合运用到网页或者APP的设计当中,推荐过来和飞特的朋友们一起分享学习了,先来看看最终的效果图吧 具体的制作步骤如下:

  3. 根据BDUSS获取用户ID信息

    代码在 /data/svndir/business/workroot2/app/ecom/ubec/getuser

  4. PECL轻松安装PHP扩展

    搭建PHP环境的时候,我们通常不会把全部的扩展都安装,随着需求不断添加,可能须要安装新的扩展,以下介绍一种简便的安装方法. 此处以ev.so扩展为例. 1.进入php安装文件夹bin文件夹.cd /A ...

  5. 【Xcode学C-1】怎样用Xcode练习C语言，并练习一个输出样例，以及重要的注意事项

    直接用Xcode学习C语言,为iOS开发打基础. (1)选择OS X >>> Application >>> Command Line Tool (2)输入产品名称 ...

  6. 具体验证身份证号码规则和姓名（汉字）的java代码

    一.验证汉字的正則表達式  /** 是否是汉字的正则 */  private String regexIsHanZi = "[\\u4e00-\\u9fa5]+";   * @pa ...

  7. hdoj--3062--party（2-sat 可行解）

    Party Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  8. roscore不能启动

    通过VNC 在VNC窗口上出入 roscore  得到下面错误信息 ----------------------------------------------------------- proces ...

  9. Swagger 隐藏具体API

    一.why 在swagger ui界面中有时候不想显示某些api,通过下面的方式可以实现. 1.1.新建一个类实现IDocumentFilter接口 using Swashbuckle.Swagger ...

  10. SpringBoot(八) Spring和消息队列RabbitMQ

    概述 1.大多数应用中,可以通过消息服务中间件来提升系统异步能力和拓展解耦能力. 2.消息服务中的两个重要概念:消息代理(Message broker)和目的地(destination) 当消息发送者 ...