两题前端开发工程师面试题
题目在这，解决方案也是其一
http://www.rainweb.cn/article/304.html
这里的解决方案是，绝对定位，然后根据鼠标移动事件，进行大小控制。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>鼠标停留当前区域变大</title>
<style type="text/css">
div{background:#CCCCCC;}
#first{float:left;width:100px; height:150px}
#second{clear:left;float:left;margin-top:10px;width:100px;height:150px}
#third{zoom:1; width:200px;margin-left:110px;_margin-left:107px; height:310px}
/*body{
margin:0; padding: 0;
}
div{background:#ccc; position:absolute;}
#first{width:100px;height: 150px;}
#second{top:160px;width: 100px; height:150px;}
#third{width:200px; height:310px; left:110px;}*/
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<script type="text/javascript">
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="#f00"; // 设置调试背景
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>
</body>
<html>
<head>
<meta charset="utf8" />
<title>鼠标停留当前区域变大</title>
<style type="text/css">
div{background:#CCCCCC;}
#first{float:left;width:100px; height:150px}
#second{clear:left;float:left;margin-top:10px;width:100px;height:150px}
#third{zoom:1; width:200px;margin-left:110px;_margin-left:107px; height:310px}
/*body{
margin:0; padding: 0;
}
div{background:#ccc; position:absolute;}
#first{width:100px;height: 150px;}
#second{top:160px;width: 100px; height:150px;}
#third{width:200px; height:310px; left:110px;}*/
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<script type="text/javascript">
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="#f00"; // 设置调试背景
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>
</body>
</html>
解决方案二：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>鼠标停留当前区域变大</title>
<style type="text/css">
.wrap{ width:960px;margin:0 auto; position:relative; z-index:1;}
.left{ width:220px; float:left; position:relative;z-index:2;}
.right{ width:730px;float:right;position:relative; background:#ccc;z-index:2;}
.l_first{ height:200px;background:#ccc;z-index:3;}
.l_first_b{background:#FF9; position:absolute;z-index:100;filter:alpha(opacity=70);opacity:0.75; }
.l_second{ height:200px;background:#ccc;z-index:3;}
.l_second_b{ background:#FF9; position:absolute;z-index:100;filter:alpha(opacity=70);opacity:0.75; }
.r_first{height:410px;z-index:3;}
.r_first_b{ background:#FF9; position:absolute;z-index:100;filter:alpha(opacity=70);opacity:0.75; }
.blank10{ height:10px;line-height:0; font-size:0; overflow:hidden;}
</style>
</head>
<body>
<div class="wrap">
<div class="right">
<div class="r_first">
<div class="r_first" id="r_first" onmouseover="zoomDiv(this.id,1.25,1.25)" onmouseout="zoomDivOut(this.id)"></div>
</div>
</div>
<div class="left">
<div class="l_first">
<div class="l_first" id="l_first" onmouseover="zoomDiv(this.id,1.25,1.25)" onmouseout="zoomDivOut(this.id)"></div>
</div>
<div class="blank10"></div>
<div class="l_second">
<div class="l_second" id="l_second" onmouseover="zoomDiv(this.id,1.25,1.25)" onmouseout="zoomDivOut(this.id)"></div>
</div>
</div>
</div>
<script type="text/javascript">
function zoomDiv(obj,x,y){
var o =document.getElementById(obj);//此处不能加引号，引号内的为字符串，不是变量
var oldWidth=o.offsetWidth;
var oldHeight=o.offsetHeight;
o.style.width=oldWidth*x+"px";
o.style.height=oldHeight*y+"px";
o.className=obj+"_b";
}
function zoomDivOut(obj){
var o =document.getElementById(obj);//此处不能加引号，引号内的为字符串，不是变量
o.style.width='';
o.style.height='';
o.className=obj;
}
</script>
</body>
</html>
<head>
<meta charset="utf8" />
<title>鼠标停留当前区域变大</title>
<style type="text/css">
.wrap{ width:960px;margin:0 auto; position:relative; z-index:1;}
.left{ width:220px; float:left; position:relative;z-index:2;}
.right{ width:730px;float:right;position:relative; background:#ccc;z-index:2;}
.l_first{ height:200px;background:#ccc;z-index:3;}
.l_first_b{background:#FF9; position:absolute;z-index:100;filter:alpha(opacity=70);opacity:0.75; }
.l_second{ height:200px;background:#ccc;z-index:3;}
.l_second_b{ background:#FF9; position:absolute;z-index:100;filter:alpha(opacity=70);opacity:0.75; }
.r_first{height:410px;z-index:3;}
.r_first_b{ background:#FF9; position:absolute;z-index:100;filter:alpha(opacity=70);opacity:0.75; }
.blank10{ height:10px;line-height:0; font-size:0; overflow:hidden;}
</style>
</head>
<body>
<div class="wrap">
<div class="right">
<div class="r_first">
<div class="r_first" id="r_first" onmouseover="zoomDiv(this.id,1.25,1.25)" onmouseout="zoomDivOut(this.id)"></div>
</div>
</div>
<div class="left">
<div class="l_first">
<div class="l_first" id="l_first" onmouseover="zoomDiv(this.id,1.25,1.25)" onmouseout="zoomDivOut(this.id)"></div>
</div>
<div class="blank10"></div>
<div class="l_second">
<div class="l_second" id="l_second" onmouseover="zoomDiv(this.id,1.25,1.25)" onmouseout="zoomDivOut(this.id)"></div>
</div>
</div>
</div>
<script type="text/javascript">
function zoomDiv(obj,x,y){
var o =document.getElementById(obj);//此处不能加引号，引号内的为字符串，不是变量
var oldWidth=o.offsetWidth;
var oldHeight=o.offsetHeight;
o.style.width=oldWidth*x+"px";
o.style.height=oldHeight*y+"px";
o.className=obj+"_b";
}
function zoomDivOut(obj){
var o =document.getElementById(obj);//此处不能加引号，引号内的为字符串，不是变量
o.style.width='';
o.style.height='';
o.className=obj;
}
</script>
</body>
</html>
这个效果思路是，鼠标移动到区域，定位方式才是absolute，也就是脱离标准流了。然后它的父元素是relative定位。
合乎自然而生生不息。。。
