js多个物体运动问题2

问题1

http://www.cnblogs.com/huaci/p/3854216.html

在上一讲问题1，我们可以整理出2点：

1，定时器作为运动物体的属性

2，startMove方法，参数要传递2个：物体，目标值

那么，如果运动物体的属性值改变，是通过一个变量值来改变的话，这时候会有什么问题呢？

示例：多个Div淡入淡出

现象：onmouseover时，透明度降低；onmouseout时，透明度增加

看看它会有什么问题，请看下面代码

html部分：

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div><style>div { float:left; width:150px; height:200px; margin:20px; filter:alpha(opacity:30); opacity:0.3; background:green;}
</style>

js部分：

<script>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,100);}aDiv[i].onmouseout = function(){startMove(this,30);}        }
}var vAlpha = 30;
function startMove(obj, iTarget){clearInterval(obj.timer);obj.timer = setInterval(function(){var speed = (iTarget - vAlpha)/6;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);if(vAlpha == iTarget){clearInterval(obj.timer);} else {vAlpha +=speed;obj.style.filter = "alpha(opacity:" + vAlpha + ")";obj.style.opacity = vAlpha;document.title = vAlpha;  //检测问题现象}},30);
}</script>

运行上面代码，发现

问题现象：快速的在几个div之间移动，然后在其中一个div上停止。

会发现每个div的透明度色彩不一样。

检测：document.title = vAlpha;

原因：vAlpha作为全局变量引起的。当从A中移出时，它减小。再迅速移入B中，它增加。一个要减小，一个要增加，这两个就这样绷着。

解决：

将vAlpha作为物体的属性

aDiv[i].vAlpha = 30;

启示：对于多物体运动来说，所有东西都不能共用

修改后的代码如下

完整示例：

<script>window.onload = function(){var aDiv = document.getElementsByTagName("div");for(var i=0; i<aDiv.length; i++){aDiv[i].timer = null;aDiv[i].vAlpha = 30;        aDiv[i].onmouseover = function(){startMove(this,100);}aDiv[i].onmouseout = function(){startMove(this,30);}        }
}//var vAlpha = 30;
function startMove(obj, iTarget){clearInterval(obj.timer);obj.timer = setInterval(function(){var speed = (iTarget - obj.vAlpha)/6;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);if(obj.vAlpha == iTarget){clearInterval(obj.timer);} else {obj.vAlpha +=speed;obj.style.filter = "alpha(opacity:" + obj.vAlpha + ")";obj.style.opacity = obj.vAlpha;document.title = obj.vAlpha;    //检测问题现象
        }},30);
}</script>

综上，发现：

可以整理以下几条：

多物体运动框架：

1，定时器作为物体的属性

2，参数的传递：物体，目标值

例子：多个Div淡入淡出

1,所有东西都不能共用

2,属性与运动对象绑定：速度，其它属性值（如透明度等）

转载于:https://www.cnblogs.com/huaci/p/3854304.html

js多个物体运动问题2相关推荐

javascript多物体运动元素共享？no
<!doctype html> <html> <head><meta charset="UTF-8"><title>js ...
css3运动框架,模拟现实物体运动的js动画库框架-Anima
Anima是一款可以同时控制许多对象进行动画的js插件.并且每一个对象都有它们各自的质量和密度以模拟现实生活中的物体.CSS动画有一些限制,最主要的是你不可以真正完全的控制它们.如果不使用一些技巧的话 ...
javascript从入门到跑路-----小文的js学习笔记（25）------运动框架----匀速运动、缓冲运动、多物体运动、链式运动
** javascript从入门到跑路-----小文的js学习笔记(1)---------script.alert.document.write() 和 console.log 标签 javascri ...
JavaScriptDay08:js运动基础，单物体运动框架，多物体运动框架，改变单一任意值运动框架，改变多值运动框架，完美运动框架
目录 0x00 js的运动基础 0x01 单物体运动框架 0x02 多物体运动框架 0x03 改变单一任意值运动框架 0x04 链式运动框架 0x05 改变多值运动框架 0x06 完美运动框架 0x0 ...
android+Unity3D游戏开发之简单的物体运动
android+Unity3D游戏开发之简单的物体运动其实这篇也是转载的,真的感觉对于我们初学者来说很不错的,不信你看看嘛;原创链接:http://bbs.9ria.com/thread-98192 ...
（42）2021-03-01（物体运动、swiper软件、自执行函数）
物体运动.swiper软件.自执行函数 (一).物体运动一.物体运动二.分享1 三.分享2 四.淡入淡出五.缓冲运动六.缓冲运动案例七.多物体运动八.offset的问题九.多样式运动十 ...
游戏中的物理与数学（一）：物体运动算法的实现
(看了<游戏开发的数学与物理>,感觉很不错,记下点东西. 这是本"图灵程序丛书",对于这个系列的书,我一直是蛮喜欢的,感觉书的内容.排版等,都让人看着很舒服.) 1.1 ...
物体运动到一个点停止_运用SolidWorks运动仿真来做的最速降线及其验证，来看看我的办法...
一个仅受重力的物体,从一个点出发,沿着一条没有摩擦的斜坡滚动到另外一个点.肯定有一个斜坡使物体运动的时间最短.这个斜坡所在的曲线就是"最速降线". 关于这个最速降线是怎么计算出来, ...
物体运动到一个点停止_大颗粒搭建中常见的结构运动
今天,给大家带来大颗粒搭建中常见的结构家长们可以带孩子一起将原理编程实践举一反三,创造创新! 1齿轮传动齿轮传动是指用主.从动轮的齿轮进行动力传递,从而达到使物体运动的作用. ① 减速传动当 ...

js多个物体运动问题2

js多个物体运动问题2相关推荐

最新文章

热门文章