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 相关文章推荐
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 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
967 个函式
2006/10/09 PHP
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
php HandlerSocket的使用
2011/05/02 PHP
PHP中的Memcache详解
2014/04/05 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
学习JS中的DOM节点以及操作
2018/04/30 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
使用Python构建Hopfield网络的教程
2015/04/14 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
windows下python和pip安装教程
2018/05/25 Python
python调用百度语音REST API
2018/08/30 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
python 8种必备的gui库
2020/08/27 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
大整数数相乘的问题
2012/07/22 面试题
财务会计实习报告体会
2013/12/20 职场文书
农民工创业典型事迹
2014/01/25 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
银行给客户的感谢信
2015/01/23 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
详解Redis主从复制实践
2021/05/19 Redis