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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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执行sql语句的写法
2009/03/10 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
python如何制作缩略图
2019/04/30 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
python3 实现调用串口功能
2019/12/26 Python
Python3列表List入门知识附实例
2020/02/09 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
中英文求职信范文
2014/01/27 职场文书
大学班级计划书
2014/04/29 职场文书
工程质检员岗位职责
2015/04/08 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫