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>