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 相关文章推荐
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
jQuery原生的动画效果
Jul 10 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
vue动态绘制四分之三圆环图效果
Sep 03 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
PHP5 字符串处理函数大全
2010/03/23 PHP
php 多文件上传的实现实例
2016/10/23 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python爬虫实例详解
2018/06/19 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
Flask-WTF表单的使用方法
2019/07/12 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
日语专业毕业生求职信
2013/12/04 职场文书
大家检讨书5000字
2014/02/03 职场文书
经典团队口号大全
2014/06/21 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
实习证明格式范文
2015/06/16 职场文书
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL