首页 > 代码库 > js多个物体运动问题2
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,属性与运动对象绑定:速度,其它属性值(如透明度等)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。