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

《CSS网页制作教程之鼠标指向时DIV区域放大.docx》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、css1#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;}1234567891011121314151617181920window.onload=function(){//加载DOM后执行functionzoom(id,x,y){//设置缩放函数参

2、数，id,横向缩放倍数，纵向缩放倍数varobj=document.getElementById("box");//获取元素对象值vardW=obj.clientWidth;//获取元素宽度vardH=obj.clientHeight;//获取元素高度obj.onmouseover=function(){//鼠标指向该对象状态this.style.width=dW*x+"px";//横向缩放this.style.height=dH*y+"px";//纵向缩放this.style.backgroundColor="#f00";//背景颜色变换th

3、is.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