<!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         #div1{width:100px;height:100px;background: red;position:absolute;left:30px;top:50px; border-radius: 50px;}

            </style>

     <script type="text/javascript">

         window.onload = function () {

             var oBtn1 = document.getElementById('btn1');

             var oBtn2 = document.getElementById('btn2');

             var oDiv = document.getElementById('div1');

             oBtn1.onclick = function () {

                 doMove(oDiv, -12, 10); // 直接就回到原点，原因是没判断大于小于号

             }

             oBtn2.onclick = function () {

                 doMove(oDiv, 12, 800);

             }

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

             function doMove(obj, dir, target) {

                 clearInterval(obj.timer);

                 obj.timer = setInterval(function () {

                     var speed = parseInt(getStyle(obj, 'left')) + dir;

                     if (speed > target && dir > 0) { // 往前跑

                         speed = target;

                     }

                     if (speed < target && dir < 0) { // 往后跑

                         speed = target;

                     }

                     obj.style.left = speed + 'px'

                     if (speed == target) {

                         clearInterval(obj.timer);

                     }

                 }, 30)

             }

             function getStyle(obj, attr) {

                 return getComputedStyle(obj)[attr];

             }

         }

     </script>

 </head>

 <body>

     <input id="btn1" type="button" value="向前">

     <input id="btn2" type="button" value="向后">

     <div id="div1"></div>

 </body>

 </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. Docker学习总结（14）——从代码到上线， 云端Docker化持续交付实践

    2016云栖大会·北京峰会于8月9号在国家会议中心拉开帷幕,在云栖社区开发者技术专场中,来自阿里云技术专家罗晶(瑶靖)为在场的听众带来<从代码到上线,云端Docker化持续交付实践>精彩分 ...

  2. 2015 Multi-University Training Contest 8 hdu 5381 The sum of gcd

    The sum of gcd Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  3. PHP 防xss攻击

    PHP直接输出html的,可以采用以下的方法进行过滤: 1.htmlspecialchars函数 2.htmlentities函数 3.HTMLPurifier.auto.php插件 4.Remove ...

  4. POJ 2184

    简单的01背包,把S看体积,把F看价值,把它们变正数处理就可以了.在处理负数时,因为减一个负数相当于加一个,所以要从前往后. #include <iostream> #include &l ...

  5. [Tailwind] Abstract Utility Classes to BEM Components in Tailwind

    When creating UIs with utility classes, a lot of repetition can occur within the HTML markup. In thi ...

  6. R语言的帮助使用和图形功能简单介绍

    R语言的帮助使用和图形功能简单介绍 R语言帮助,在Windows桌面下,有很多种.最长使用的是在命令行下help() > help.start() 会在浏览器中,打开帮助的主页 watermar ...

  7. Microsoft Dynamics CRM 2013 for Outlook 的硬件要求

    当仅联机或脱机模式下执行 Microsoft Dynamics CRM 2013 for Microsoft Office Outlook 时,下表列出了建议的最低硬件要求 watermark/2/t ...

  8. Unity3D 人形血条制作小知识

    这几天用Unity3D做个射击小游戏,想做个人形的血条.百思不得其解,后来问了网上的牛牛们,攻克了,事实上挺简单的,GUI里面有个函数DrawTextureWithTexCoords就能够实现图片的裁 ...

  9. POJ-3984-迷宫问题-BFS(广搜)-手写队列

    题目链接:id=3984">http://poj.org/problem? id=3984 这个本来是个模板题,可是老师要去不能用STL里的queue,得自己手写解决.ORZ....看 ...

  10. oracle rac下调节redo log file 文件大小

    rac下调节redo log file 文件大小 (1)查看当前日志信息: select * from v$logfile; (步骤2中得路径能够在这里MEMBER列看到,redo文件名称自己命名.比 ...