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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
node+express制作爬虫教程
Nov 11 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 Javascript
如何通过vscode运行调试javascript代码
Jul 24 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
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
js实现日历的简单算法
2017/01/24 Javascript
面试常见的js算法题
2017/03/23 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
Python 第一步 hello world
2009/09/25 Python
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
windows下python安装pip图文教程
2018/05/25 Python
Python构建图像分类识别器的方法
2019/01/12 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
个人总结与自我评价
2015/02/14 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
道歉的话怎么说
2015/05/12 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
Python中的嵌套循环详情
2022/03/23 Python