js多物体任意值运动

浏览数：25 / 时间：2015年06月09日

假如有两个div，一个div要变宽，一个div要变高，你怎么写呢？

哎呀，写2个方法啊，一个控制div1变宽，一个控制div2变高啊

那么你的代码，是不是下面这样的呢！

示例：Div变宽和变高

现象：div1在onmouseover时变宽,onmouseout时恢复原大小;

div2在onmouseover时变高，onmouseout时恢复原大小

缺点：重复的代码写了好几个方法

html部分

<div id="div1"></div>
<div id="div2"></div>

<style>
    div {  width:100px; height:150px; margin:20px; background:green;}
</style>

js部分

<script>

window.onload = function(){
	var oDiv1 = document.getElementById("div1");
	var oDiv2 = document.getElementById("div2");
	
	oDiv1.onmouseover = function(){
		startMove1(this,300);
	}
	
	oDiv1.onmouseout = function(){
		startMove1(this,100);
	}
	
	oDiv2.onmouseover = function(){
		startMove2(this,300);
	}
	
	oDiv2.onmouseout = function(){
		startMove2(this,150);
	}
	
}

function startMove1(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);
}

function startMove2(obj,iTarget){
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		var speed = (iTarget - obj.offsetHeight)/6;
		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
		if(obj.offsetHeight == iTarget){
			clearInterval(obj.timer);
		} else {
			obj.style.height = obj.offsetHeight + speed + "px";
		}
	
	},30);
}

</script>

额，上面的代码，本来是一个运动框架的，却写了两个类似的方法。

而且还使用了offset，这是有缺陷的啊

那么，可不可以用一个方法就解决这个问题了呢。

可以的

回想 js你真的了解offsetWidth吗，有没有给我们带来什么启发呢？

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

对了，利用function getStyle(obj,name)，我们就可以控制多个属性值的改变啦

原理：var attr= parseInt(getStyle(obj,name));

修改后的完整代码，如下：

js部分

<script>

window.onload = function(){
	var oDiv1 = document.getElementById("div1");
	var oDiv2 = document.getElementById("div2");
	
	oDiv1.onmouseover = function(){
		startMove(this,"width",300);
	}
	
	oDiv1.onmouseout = function(){
		startMove(this,"width",100);
	}
	
	oDiv2.onmouseover = function(){
		startMove(this,"height",300);
	}
	
	oDiv2.onmouseout = function(){
		startMove(this,"height",150);
	}
	
}

function startMove(obj,name,iTarget){
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		var attr = parseInt(getStyle(obj,name));
		var speed = (iTarget - attr)/6;
		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
		if(attr == iTarget){
			clearInterval(obj.timer);
		} else {
			obj.style[name] = attr + speed + "px";
		}
	
	},30);
}

function getStyle(obj,name){
	if(obj.currentStyle){
		return obj.currentStyle[name];
	} else{
		getComputed(obj,null)[name];
	}
	
}


</script>

js多物体任意值运动,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js多物体任意值运动