首页 > 代码库 > js多物体任意值运动

js多物体任意值运动

2024-07-13 20:41:03   226人阅读

假如有两个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>

 

　　


联系
我们