js多个物体运动的问题1
2014-07-18 20:13
423 查看
问题2
/article/6082286.html
用js写一个物体的运动很简单。如果一个页面有多个物体在运动,它会不会出问题呢?
ok,我们来看一个示例
让多个div变宽
现象:onmouseover时,div宽度变宽;onmouseout时,div恢复原大小
html部分
js部分
运行后,
问题:当鼠标在几个div之间来回切换操作时,发现之间的div停住了,收不回去了
原因:分析上面代码,原来是进入一个新的div操作时,把之前的所有定时器都给关了
一句话:整个程序就只有一个定时器
解决:为每个运动对象,都定义一个定时器
只开启和关闭当前操作的这个运动对象的定时器
现在给出修改后的完整代码啊
完整示例:
下一节,问题2
/article/6082286.html
/article/6082286.html
用js写一个物体的运动很简单。如果一个页面有多个物体在运动,它会不会出问题呢?
ok,我们来看一个示例
让多个div变宽
现象:onmouseover时,div宽度变宽;onmouseout时,div恢复原大小
html部分
<div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <style> div { width:100px; height:30px; margin:10px; background:green;} </style>
js部分
<script> 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停住了,收不回去了
原因:分析上面代码,原来是进入一个新的div操作时,把之前的所有定时器都给关了
一句话:整个程序就只有一个定时器
解决:为每个运动对象,都定义一个定时器
只开启和关闭当前操作的这个运动对象的定时器
现在给出修改后的完整代码啊
完整示例:
<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,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>
下一节,问题2
/article/6082286.html
相关文章推荐
- js多个物体运动问题2
- JS多物体 任意值 链式 缓冲运动
- js完美多物体运动框架(缓冲运动)
- js运动-改变透明度(单物体)
- js动画---多物体运动
- js动画2 多物体运动
- 运动物体检测的问题
- (36)JS运动之使物体向右运动
- js 多物体运动
- 模拟真实物体运动的js动画库插件-Anima
- js封装多物体运动函数
- JS实现多物体缓冲运动实例代码
- 简单的JS多物体的运动---运动和透明度的变化
- JS运动的各种问题【二】
- js实现多物体运动框架并兼容各浏览器
- js多物体运动框架
- [js]多个物体的运动
- (42)JS运动之多物体框架--多个div变宽
- JS运动-放大缩小物体(从中心)
- js动画(4)——多物体运动