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 call 函数的用法说明
Apr 09 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
ES5和ES6中类的区别总结
Dec 21 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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动态生成虚拟现实VRML网页
2006/10/09 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
javascript编写简易计算器
2017/05/06 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python实现Youku视频批量下载功能
2017/03/14 Python
python enumerate函数的使用方法总结
2017/11/15 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
Python合并多个Excel数据的方法
2018/07/16 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
机电专业毕业生求职信
2013/10/27 职场文书
工作表现评语
2014/01/19 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
六查六看剖析材料
2014/10/06 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL