两题前端开发工程师面试题

题目在这，解决方案也是其一

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{100px;height: 150px;}
#second{top:160px; 100px; height:150px;}
#third{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>

这个效果思路是，鼠标移动到区域，定位方式才是absolute，也就是脱离标准流了。然后它的父元素是relative定位。

合乎自然而生生不息。。。