css
1#box{ width:200px; height:200px; position:absolute;top:50%;left:50%; margin-left:-100px; margin-top:-100px; background-color:green;-moz-border-radius:6px;-webkit-border-radius:6px;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.onload=function(){//加載DOM後執行
function zoom(id,x,y){//設置縮放函數參數，id,橫向縮放倍數，縱向縮放倍數
var obj=document.getElementById("box");//獲取元素對象值
var dW=obj.clientWidth;//獲取元素寬度
var dH=obj.clientHeight;//獲取元素高度
obj.onmouseover=function(){//鼠標指向該對象狀態
this.style.width=dW*x+"px";//橫向縮放
this.style.height=dH*y+"px";//縱向縮放
this.style.backgroundColor="#f00";//背景顏色變換
this.style.zIndex=1;//Z軸優先
}
obj.onmouseout=function(){//鼠標離開元素,設置默認值
this.style.width="";
this.style.height="";
this.style.backgroundColor ="";
this.style.zIndex="";
}
}
zoom("box",1.5,1.5);//調用函數
}
1
</span><div id="box"></div>