区块放大
51cto上看到的一个前端面试题(http://developer.51cto.com/art/201206/345184.htm)
要实现的效果:
里面的要求是用js,顺便也加了css的实现。最关键的呢,就是z-index.
<head>
<style>
body{ margin:0; padding:0}
div{background:#CCCCCC; position:absolute}
#first{width:100px; height:150px}
#second{top:160px;width:100px;height:150px}
#third{ width:200px; height:310px; left:110px}
#first:hover{width: 125px; height: 190px; background: green; z-index: 1}
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</body>
<script>
function zoom(id,x,y){ // 设置缩放函数参数:容器id、横向缩放倍数、纵向缩放倍数(等比例缩放时也可以设定一个参数)
var obj=document.getElementById(id); // 获取元素对象值
var dW=obj.clientWidth; // 获取元素宽度
var dH=obj.clientHeight; // 获取元素高度
//var oTop=obj.offsetTop;
//var oLeft=obj.offsetLeft;
obj.onmouseover=function(){ // 鼠标移入
this.style.width=dW*x+"px"; // 横向缩放
this.style.height=dH*y+"px"; // 纵向缩放
this.style.backgroundColor="green"; //设置调试背景
this.style.zIndex=1; // 设置z轴优先
}
obj.onmouseout=function(){ // 鼠标移出,设回默认值
this.style.width="";
this.style.height="";
this.style.padding="";
this.style.backgroundColor="";
this.style.zIndex="";
}
}
//zoom("first",1.25,1.25);
zoom("second",1.25,1.25);
zoom("third",1.25,1.25);
</script>