Javascript 多物体运动的实现


Posted in Javascript onDecember 24, 2014

我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题。

<style type="text/css">

            div {

                width: 100px;

                height: 50px;

                background: red;

                margin: 10px;

            }

        </style>
<body>

        <div></div>

        <div></div>

        <div></div>

    </body>

以下是Javascript 代码:

<script type="text/javascript">

            window.onload = function() {

                var aDiv = document.getElementsByTagName('div');

                for (var i = 0; i < aDiv.length; i++) {

                    aDiv[i].onmouseover = function() {

                        startMove(this, 400);

                    };

                    aDiv[i].onmouseout = function() {

                        startMove(this, 100);

                    };

                }

            }

            var timer = null;

            function startMove(obj, iTarget) {

                clearInterval(timer);

                timer = setInterval(function() {

                    var speed = (iTarget - obj.offsetWidth) / 6;

                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    if (obj.offsetWidth == iTarget) {

                        clearInterval(timer);

                    } else {

                        obj.style.width = obj.offsetWidth + speed + 'px';

                    }

                }, 30);

            }

        </script>

此时当鼠标移入到第一个div 时,他是正常运行的。但是如果现在又移动到第二个或者第三个div时候就会出现bug。

image 这个是什么原因呢? 看图可以看出并没有运动完成。实际上是这样的,

整个程序就一个定时器, 比如第一个div开始动了,第二个div 鼠标移入了 前一个定时器就被干掉了,那么自然就卡在那里了。

所以最大的问题就是整个程序就只有一个定时器。那么怎么解决这个问题呢?

解决方案:

其实很简单,把定时器作为一个物体的属性加上,那么每个物体都有一个定时器在,当关闭定时器的时候是关闭物体上的定时器,开也是物体上的定时器

那么他们之间就可以完全互不干扰的运行。

看下修改后的Javascript代码:

<script type="text/javascript">

            window.onload = function() {

                var aDiv = document.getElementsByTagName('div');

                for (var i = 0; i < aDiv.length; i++) {

                    aDiv[i].timer=null; // 把定时器作为一个物体的属性存起来

                    aDiv[i].onmouseover = function() {

                        startMove(this, 400);

                    };

                    aDiv[i].onmouseout = function() {

                        startMove(this, 100);

                    };

                }

            }

            function startMove(obj, iTarget) {

                clearInterval(obj.timer);

                obj.timer = setInterval(function() {

                    var speed = (iTarget - obj.offsetWidth) / 6;

                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    if (obj.offsetWidth == iTarget) {

                        clearInterval(obj.timer);

                    } else {

                        obj.style.width = obj.offsetWidth + speed + 'px';

                    }

                }, 30);

            }

        </script>

这样程序就没有问题了,能够支持多物体的运动。

Javascript 相关文章推荐
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 #Javascript
jQuery中height()方法用法实例
Dec 24 #Javascript
jQuery中width()方法用法实例
Dec 24 #Javascript
jQuery中animate()方法用法实例
Dec 24 #Javascript
jQuery中fadeOut()方法用法实例
Dec 24 #Javascript
创建js对象和js类的方法汇总
Dec 24 #Javascript
javascript使用prototype完成单继承
Dec 24 #Javascript
You might like
php数据库连接
2006/10/09 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
python2.7实现爬虫网页数据
2018/05/25 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
产品设计开发计划书
2014/05/07 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
企业金融服务方案
2014/06/03 职场文书
工业设计专业自荐书
2014/06/05 职场文书
家长会欢迎标语
2014/06/24 职场文书
教师工作决心书
2015/02/04 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
JavaScript前端面试组合函数
2022/06/21 Javascript