效果：

思路：

利用setInerval()计时器，进行运动。然后关键的一点是在最后停止的时候给它一个填充缝隙的判断。

代码：

 <head runat="server">

     <title></title>

     <style type="text/css">

         #div1

         {

             width: 100px;

             height: 100px;

             background: #0000FF;

             position: absolute;

             left: 800px;

             top: 100px;

         }

         #div200

         {

             width: 1px;

             height: 400px;

             background: #FF0000;

             position: absolute;

             left: 200px;

         }

         #div500

         {

             width: 1px;

             height: 400px;

             background: #FF0000;

             position: absolute;

             left: 500px;

         }

     </style>

     <script type="text/javascript">

         function move(end) {

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

             var timer = null;

             timer = setInterval(function () {

                 var speed = (end - oDiv.offsetLeft) / 5;        //根据终点和offsetLeft取出运动的速度

                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);       //进位取整，小数位变为整位，

                 //                if (oDiv.offsetLeft <= end) {

                 //                    clearInterval(timer);

                 //                }

                 //                else {

                 //                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';

                 //                }

                 if (Math.abs(end - oDiv.offsetLeft) <= speed) { //由于在停止的时候最后会出现小的缝隙，或者说没有完全的到达指定地点，所以要小于它的速度

                     clearInterval(timer);                       //当距离小于速度时，让计时器停止

                     oDiv.style.left = end + 'px';           //在停止后填充缝隙。

                 }

                 else {

                     oDiv.style.left = oDiv.offsetLeft + speed + 'px';       //移动DIV

                 }

             }, 30)

         }

     </script>

 </head>

 <body>

     <input type="button" id="btn1" value="到500的位置" onclick="move(500);" />

     <input type="button" id="btn2" value="到200的位置" onclick="move(200);" />

     <div id="div1">

     </div>

     <div id="div200">200

     </div>

     <div id="div500">500

     </div>

 </body>

点滴积累【JS】---JS小功能（JS实现匀速运动）的更多相关文章

  1. JS类小功能

    工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...

  2. js实现小功能 动态赋值

  3. 常用小功能js函数-函数防抖

    函数防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时.这个我经常用到/** * 函数防抖 * fun 需要延时执行的函数 * delayTime 延时时间 * **/export ...

  4. js/jq 小功能函数

    1.点击复制内容到剪贴板 function copyToClip(str) { var save = function(e) { e.clipboardData.setData('text/plain ...

  5. js实现小时钟,js中Date对象的使用?

    介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...

  6. js小功能整理

    /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [检测是否含有的字符串] * @return ...

  7. js小功能记录

    个人日常中遇到的js小功能记录,方便查看. /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [ ...

  8. js模仿微信语音播放的小功能

    自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,,  代码如下: <!DOCTYPE html> <html lang="en&qu ...

  9. 网站开发---js与java实现的一些小功能

    记录一下网站开发过程中的一些小功能 1.js获取当前年份: <span>Copyright © 2017-<script>document.write( new Date(). ...

  10. Vue小功能-视频播放之video.js

        最近在练手一个小项目,想给首页增加一个视频介绍(如下图).涉及到了vue视频播放的功能,所以在网上了解了一下.     相关的插件是Video.js,官网讲解比较详细,我罗列出来,可以根据自己 ...

随机推荐

  1. cocos2d-x Cygwin编译 recipe for target `obj/local/armeabi/libcocos2d.so' fail 解决办法

    在编译cocos2d-x的helloworld 或者 tests的时候. 官网上使用ndk4.ndk5,这里是使用 ndkr7b.ndkr8或ndkr8b .操作会简单很多,但是出了些小问题也是很坑人 ...

  2. Wishbone B3总线Generic RAM写法

    以下Verilog HDL代码符合wishbone总线B3标准协议,在Altera和Xilinx的开发工具上可以实现综合,自动推断并采用片上RAM资源,可以完成内存内容的初始化. /* ******* ...

  3. 【转载】【Todo】电商架构相关技术分析

    看了一篇文章: http://kb.cnblogs.com/page/193670/    淘宝应对"双11"的技术架构分析 没怎么看懂,有时间再看.

  4. 【转载】【Todo】银弹与我们的职业

    看到一段文字,不得不单独拎出来. 然后再借用一下g9老大的<银弹和我们的职业>中的话: 银弹和我们的职业发展有什么相干?很简单:我们得把时间用于学习解决本质困难.新技术给高手带来方便.菜鸟 ...

  5. Spark Streaming ReceiverTracker架构设计

    本节的主要内容: 一.ReceiverTracker的架构设计 二.消息循环系统 三.ReceiverTracker具体实现 Spark Streaming作为Spark Core基础 架构之上的一个 ...

  6. java 图片文字识别 ocr

    最近在开发的时候需要识别图片中的一些文字,网上找了相关资料之后,发现google有一个离线的工具,以下为java使用的demo 在此之前,使用这个工具需要在本地安装OCR工具: 下面一个是一定要安装的 ...

  7. C#/Sqlite-SQLite PetaPoco django 打造桌面程序

    为什么是 SQLite? 在以前的程序中, 我通常会使用 MySQL. 如果使用你程序的用户是一个软件小白, 而且远在另一个城市, 那么让她安装和部署 MySQL 将是一场噩梦: 她需要配置服务, 面 ...

  8. centos关闭sudo的ldap认证

    在新服务器上部署项目时,运行sudo命令会卡住很久,然后报错 sudo:ldap_start_tls_s(): Can't contact LDAP server 简直不能忍. 一番研究后发现是lda ...

  9. （转）scala apply方法 笔记

    在akka源码中有这样一个Cluster类. 使用方法是这样的:val cluster = Cluster(context.system); 作为scala菜鸟的我,并没有找到Cluster(syst ...

  10. [Android Pro] 注册 Google Play 开发者帐户

    官网地址: https://support.google.com/googleplay/android-developer/answer/6112435?hl=zh-Hans 博客地址: http:/ ...