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 相关文章推荐
ext 列表页面关于多行查询的办法
Mar 25 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
jquery获取radio值实例
Oct 16 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
vue 页面跳转的实现方式
2021/01/12 Vue.js
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
给孩子的新年寄语
2014/04/08 职场文书
《恐龙》教学反思
2014/04/27 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
英语邀请函范文
2015/02/02 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL