js多个物体运动的问题1

问题2

http://www.cnblogs.com/huaci/p/3854304.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

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

js多个物体运动的问题1

时间: 2024-10-12 19:06:51

js多个物体运动的问题1的相关文章

js多个物体运动问题2

问题1 http://www.cnblogs.com/huaci/p/3854216.html 在上一讲问题1,我们可以整理出2点: 1,定时器作为运动物体的属性 2,startMove方法,参数要传递2个:物体,目标值 那么,如果运动物体的属性值改变,是通过一个变量值来改变的话,这时候会有什么问题呢? 示例:多个Div淡入淡出 现象:onmouseover时,透明度降低:onmouseout时,透明度增加 看看它会有什么问题,请看下面代码 html部分: <div id="div1&qu

JS定时器做物体运动

JS定时器是函数 setInterval(函数体/函数名  , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒  = 1秒 首先我们要知道用JS定时器能干什么?定时器的原理是什么? 我的理解为,定时器是能让一个物体根据规定的时间做规定的移动,而物体运动是怎样的效果呢?你可以理解为一个人走路,要走到某个位置,要走到这个位置肯定是一步步移动才能达到,而不是瞬间就到达的,所以定时器的作用更像是让物体像人一样走到相应的位置 比如: 规定一个横形状方块,其中包裹一个

js实现多物体运动框架并兼容各浏览器

首先,我们须要知道在js中获取对象的宽度如offsetWidth等.可能会存在一些小小的bug.原因之中的一个在于offsetWidth只不过获取盒子模型中内容的部分宽度.并不包括内边距,边框和外边距.这样会导致控制对象运动与预期不符.这里就不具体的去解释. 而为了解决问题.在这里.我们提供了一个方法来保证我们的运动的准确性. style仅仅能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle能够弥补style的不足.可是仅仅适用于IE. getComp

JS实现多物体width缓冲运动实例

多物体运动,运动参数不能公用. 这篇文章主要介绍了JS实现多物体缓冲运动实例代码,有需要的朋友可以参考一下 效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: 代码如下: <head runat="server"> <title></title> <style type="text/css">

模拟真实物体运动的js动画库插件-Anima

Anima是一款可以同时控制许多对象进行动画的js插件.并且每一个对象都有它们各自的质量和密度以模拟现实生活中的物体. CSS3动画有一些限制,最主要的是你不可以真正完全的控制它们.如果不使用一些技巧的话,你几乎不可能停止动画的过渡. Anima是一个基本的物理基础js动画库框架.你可以通过它很容易的创建现实生活中的物体运动动画.Anima经过压缩后只有5K大小. 在线演示:http://www.htmleaf.com/Demo/201502041327.html 下载地址:http://www

js动画之多物体运动

多个物体这不能使用一个定时器了,要给每个物体一个定时器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多物体运动</title> <style> body{margin: 0px;padding: 0px;} .animation{ background-color: green; marg

js 多物体运动框架

多物体运动框架例子:多个Div,鼠标移入biankuan 单定时器,存在问题每个Div一个定时器总结:参数问题:当运动当前的div的时候可以传参数onStart(obj,tag):obj为当前运动的div 调用时用thistag表示运动的终点距离开一个定时器(当三个div一起运动时会卡)所以利用for循环开三个定时器步骤:1.设置定时器 var timer=null:2.关闭定时器clearInterval(obj.timer);3.开启定时器:obj.timer=setInterval(fun

three.js之让物体动起来方式(一)移动摄像机

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title> <script src="../static/three.js-master/build/three.js"></script> <style type="text/css"> div#ca

基于Aforge的物体运动识别-入门

基于Aforge的物体运动识别-入门篇chatbot人工智能机器人开发,提供教学视频>>>   0 收藏(2) 本文来自http://blog.csdn.net/hellogv/ ,引用必须注明出处! 最近看到越来越多人在做物体运动识别(例如:"第六感"中的指套),而且我最近也有点闲空,所以也来玩玩.....大多数人都是用Opencv来做,那我就不做重复的工作了,换个别的开源类库~~~Aforge. 来自百度知道的Aforge介绍:AForge.NET 是一个专门为开