JS实现匀速运动的代码实例


Posted in Javascript onNovember 29, 2013

效果:

JS实现匀速运动的代码实例

 

思路:

利用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>
Javascript 相关文章推荐
javascript的事件描述
Sep 08 Javascript
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 #Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 #Javascript
JS实现日期加减的方法
Nov 29 #Javascript
js弹出层永远居中实现思路及代码
Nov 29 #Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 #Javascript
JS取文本框中最小值的简单实例
Nov 29 #Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 #Javascript
You might like
PHP 截取字符串专题集合
2010/08/19 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
JavaScript中获取元素索引的函数
2010/09/10 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Python and、or以及and-or语法总结
2015/04/14 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
Python os模块常用方法和属性总结
2020/02/20 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
python 如何停止一个死循环的线程
2020/11/24 Python
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
新护士岗前培训制度
2014/02/02 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
学习与创新自我评价
2015/03/09 职场文书
交通事故调解协议书
2015/05/20 职场文书
狂人日记读书笔记
2015/06/30 职场文书
教师研修随笔感言
2015/11/18 职场文书