武林網(www.49028c.com)文章簡介：鼠標指向DIV區域放大。

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>