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