CSS网页制作教程:鼠标指向时DIV区域放大

武林网(www.vevb.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>