这篇文章主要介绍了 Javascript 多物体运动的实现, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题。
- <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>
这样程序就没有问题了,能够支持多物体的运动。
来源: