一道Web前端面试题

一、用CSS实现以下布局

 

让我们一起来做一个页面
首先，我们需要一个布局。
请使用CSS控制3个div，实现如下图的布局。

 

二、用javascript优化布局。

 

由于我们的用户群喜欢放大看页面
于是我们给上一题的布局做一次优化。
当鼠标略过某个区块的时候，该区块会放大25%，
并且其他的区块仍然固定不动。

提示：
也许，我们其他的布局也会用到这个放大的效果哦。
可以使用任何开源代码，包括曾经你自己写的。

关键字：
javascript、封装、复用

 

==========分=割=线==================

一、CSS布局

页面格式如下：

 

<div id="box">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
  <div id="newdiv"></div>
</div>

 

分为四个div框，前三个添加了三个单词以便于辨认，后面的"newdiv"是放大后显示的div框。并在外面加了一个大框，在后面的定位时用到。

css代码：

#box{width:410px; height:360px;position:relative; }
#first{width:100px; height:200px; background:#ccd;  margin-bottom:10px;}
#second{width:200px; height:360px;background:#ccd; position:absolute; top:0px;left:110px;}
#third{width:100px; height:150px; background:#ccd; margin-top:10px; }

在编写 css时，我放弃使用float，因为在IE和FF中会产生差距较大的效果，不好控制。改用position定位，更利用控制。

 

二、JavaScript优化布局

思想：对前三个框添加mouseover事件函数，处理过程为：当鼠标经过时，本div框visibility属性设为hidden，显示newdiv框，采用绝对定位，大小为本鼠标经过的div框的1.25倍，而且给newdiv添加一个mouseout事件，当鼠标移出时newdiv消失，显示出本div框。

Js代码：

var newdiv;//放大显示的div元素
var lastele;//上一个鼠标经过的div元素
var ele;//鼠标正在经过的div元素
var section = {"first":1, "second":2, "third":3}

for (var divId in section )
{
	ele = document.getElementById(divId);
	ele.onmouseover = showcontent;//为前三个div元素添加mouseover事件。
}

function showcontent()
{
	this.style.visibility = "hidden";
	var ht = this.clientHeight;
	var wt = this.clientWidth;
	var px = parentX(this);//返回的是一个纯数值！！！
	var py = parentY(this);
	var parent = this.parentNode;
	if (lastele)
	{
		lastele.style.visibility = "visible";
	}
	newdiv = document.getElementById("newdiv");
	newdiv.onmouseout = function(){newdiv.style.display = "none"; if (lastele) lastele.style.visibility = "visible";};//为newdiv添加mouseout事件
	newdiv.style.display = "inline";
	newdiv.style.height = 1.25*ht + "px";//火狐中必须指出单位，否则无法解析。
	newdiv.style.width = 1.25*wt + "px";
	newdiv.style.position = "absolute";
	newdiv.style.top = py + "px";
	newdiv.style.left = px + "px";
	newdiv.style.backgroundColor = "#aac";

	lastele = this;
}

//确定元素相对于父元素的位置的两个函数。
//获取元素相对于父亲的水平位置
function parentX(elem){
	//如果offsetParent是父元素，则直接退出
	return elem.parentNode == elem.offsetParent?elem.offsetLeft:pageX(elem) - pageX(elem.patentNode);
}
//获取元素相对于父亲的垂直位置
function parentY(elem){
	return elem.parentNode == elem.offsetParent?elem.offsetTop:pageY(elem) - pageY(elem.parentNode);
}

 以上~~

FF和IE都能正常显示~~

 

Ps：本来是个面试题，我却搞了一天 ==！ 途中我很无聊的给box添加了"z-index：-1;" 结果在FF中mouseover事件无法响应了，真是晕啊~~