Javascript 多物体运动的实现

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

代码如下:

<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>

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

赞 (0)

相关推荐

  • javascript多物体运动实现方法分析

    javascript多物体运动实现方法分析

    本文实例讲述了javascript多物体运动实现方法.分享给大家供大家参考,具体如下: 这里需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用. 运行效果截图如下: 例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>多物体运动</title> <style> div{ width:100

  • js实现缓冲运动效果的方法

    本文实例讲述了js实现缓冲运动效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现一开始速度很快,然后慢下来,直到停止的效果. 要点: var speed = (target-box.offsetLeft)/8; 目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大,所以速度的值也是一直的变小 speed = speed>0?Math.ceil(speed):Math.floor(speed); 正向速度的时候向上取整,反向速度的时候向下取整 代码: <!DO

  • JS多物体实现缓冲运动效果示例

    本文实例讲述了JS多物体实现缓冲运动效果的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <titl

  • JS高级运动实例分析

    本文实例分析了JS高级运动.分享给大家供大家参考,具体如下: 一.链式运动框架 1.他需要一个回调函数,在运动停止时,开始下一次运动(执行函数) 多物体运动框架改为如下: function startMove(obj,attr,iTarget,fn){ ... if(iCur==iTarget){ clearInterval(obj.timer); fn(); }... }; 然后就可以用它,比如先变宽再变高最后变透明度 startMove(this,'width',300,function()

  • JS碰撞运动实现方法详解

    本文实例分析了JS碰撞运动实现方法.分享给大家供大家参考,具体如下: 描述:撞到目标点弹回来(速度反转) 一.无重力的漂浮div var div1=document.getElementById("div1"); var iSpeedX=6; var iSpeedY=8; setInterval(function(){ var l=div1.offsetLeft+iSpeedX; var t=div1.offsetTop+iSpeedY; if(t>=document.docum

  • JS实现多物体缓冲运动实例代码

    JS实现多物体缓冲运动实例代码

    效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        div        {            width: 100px

  • JS弹性运动实现方法分析

    本文实例分析了JS弹性运动实现方法.分享给大家供大家参考,具体如下: 描述:像弹簧一样左右弹动,最后缓慢停下来 一.加减速运动 1.加速运动 var iSpeed=0; iSpeed++; 速度越来越快,最后冲出去 2.减速运动 var iSpeed=20; iSpeed--; 速度越来越慢,降到0后开始变负值往反方向运动 二.弹性运动 1.在目标点左边,加速:目标点右边,减速,如 if(div1.offsetLeft<300){ iSpeed=iSpeed+1; //等同iSpeed++; }

  • JavaScript中的匀速运动和变速(缓冲)运动详细介绍

    一个div的运动其实就是它与浏览器边框的距离在变动.如果他变化的速率一定,那就是匀速运动:如果变化的速率不一定,那么就是变速运动.当,变化率与聚离浏览器边框的距离成比例的话,那么就可以说是div在做缓冲运动. 其实,很简单,就是用一个定时器(timer),每隔一段时间来改变div聚浏览器边框的距离. 比如匀速运动: 进入定时器:(每隔30ms做) if(是否到达终点) { 停止定时器} else do{ 改变距离} 改变距离的方法决定是匀速还是变速(缓冲)运动. 匀速的比如: 复制代码 代码如下

  • JS多物体 任意值 链式 缓冲运动

    复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title>demo</title> </h

  • Js实现简单的小球运动特效

    废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=utf-"/> </head> <body style="background:pink;"

  • JavaScript缓冲运动实现方法(2则示例)

    本文实例讲述了JavaScript缓冲运动实现方法.分享给大家供大家参考,具体如下: 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) 复制代码 代码如下: (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意:当计算出来的速度有小数时需要取整: 复制代码 代码如下: (500 - oDiv.offsetLeft) / 7 = iSpeed; iSpeed = iSpeed>0?Math.ceil(iSpeed):

  • javascript鼠标跟随运动3种效果（眼球效果，苹果菜单，方向跟随）

    javascript鼠标跟随运动3种效果（眼球效果，苹果菜单，方向跟随）

    运动除了直线运动和曲线运动两种运动形式外,还有一种运动形式是鼠标跟随运动,而这种跟随运动需要用到三角函数的相关内容或者需要进行比例运算.本文将以几个小实例来介绍角度运动的相关内容 眼球转动 在很多网页中,都存在着跟随运动,比如眼球转动.鼠标在网页中移动时,眼球也会跟着朝相应方向转动 上面是眼球转动的示意图,(x0,y0)是眼球的位置,而(x,y)是鼠标的位置.设直线与垂直方向的夹角为a,假设圆心点坐标为(0,0),可以得到以下公式 tan(a) = x/y = x0/y0 x0 = r*sin(

随机推荐