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 词法作用域和闭包分析说明
Aug 12 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
vuex 的简单使用
Mar 22 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 Javascript
js实现随机圆与矩形功能
Oct 29 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中调用其他系统http接口的方法说明
2014/02/28 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
php上传文件问题汇总
2015/01/30 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
js获取form的方法
2015/05/06 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
Python图像灰度变换及图像数组操作
2016/01/27 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
Python实现手势识别
2020/10/21 Python
python调用win32接口进行截图的示例
2020/11/11 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
出纳岗位职责模板
2013/11/27 职场文书
中学生期末评语
2014/02/03 职场文书
滴水洞导游词
2015/02/10 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python