一道阿里前端笔试题

driftcloudy

浏览: 130805 次
性别:
来自: 上海

最近访客更多访客>>

loren_mt

limars

myohmy1

hanpeng136

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

笔试面试

Dojo CSS XHTML HTML JavaScript

题目：

用CSS实现布局

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

用javascript优化布局

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

思路：

注意题目由于是只让用3个div，这让我很不习惯，如果不这么限制，我至少用四个,类似这样。

<div class='left'>
    <div id='left1'></div>
    <div id='left2'></div>
</div>
<div class='right'></div>

把其中的left和right都设成float。

现在只能用3个div，最简单的办法就是使用绝对定位。如果还要用浮动的方法，那么只能将left1,left2都设置成浮动。

完整的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>teset</title>
<style type="text/css">
	div{background:red;}
	#left1,#left2{
		width:50px;
		height:50px;
		float:left;
	}
	#left2{
		margin-top:60px;
		margin-left:-160px;
	}
	#right{
		width:100px; 
		height:110px;
		float:left;
		margin-left:10px;
	}
</style>
</head>
<body>
	<div id='left1'></div>
	<div id='right'></div>
	<div id='left2'></div>
</body>
</html>

看到下面还要求鼠标移上去的时候放大，由于浮动布局很容易遭到破坏。在这种情况，用绝对定位是一个不错的选择。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>teset</title>
<style type="text/css">
	div{background:red;}
	#left1,#left2{
		width:50px;
		height:50px;
		position:absolute;
	}
	#left1{
		top:0px;left:0px;
	}
	#left2{
		top:60px;left:0px;
	}
	#right{
		width:100px;height:110px;
		top:0px;left:60px;
		position:absolute;
	}
</style>
</head>
<body>
	<div id='left1'></div>
	<div id='left2'></div>
	<div id='right'></div>
</body>
</html>

下面开始写js函数控制div的变化，以#left1为例：

function zoomIn(){
	var node=dojo.byId('left1');
	dojo.style(node,'width','60px');
	dojo.style(node,'height','60px');
}
function zoomOut(){
	var node=dojo.byId('left1');
	dojo.style(node,'width','50px');
	dojo.style(node,'height','50px');
}	
dojo.addOnLoad(
	function(){
		dojo.connect(dojo.byId('left1'),'onmouseover',null,zoomIn);
		dojo.connect(dojo.byId('left1'),'onmouseout',null,zoomOut);
	}
);

这里用到了dojo，天天在用，也就顺手了。

分享到：

浅析document.referrer | 【翻译】JS里的各种trim实现

2011-03-24 15:49
浏览 2117
评论(5)
分类:Web前端
查看更多

5 楼 driftcloudy 2011-04-05

argont 写道

修正一下：
……
}

clone一个再盖上去~这个点子不错呢，可能我太局限于3个考虑了：）感谢指教~

4 楼 argont 2011-04-05

修正一下：

<script type="text/javascript">
function setHeight(obj, v) { obj.style.height = obj.offsetHeight * v + "px" ; }
function setWidth(obj, v) { obj.style.width = obj.offsetWidth * v + "px"; }
function pageX(obj) {
return obj.offsetParent ?
obj.offsetLeft + pageX(obj.offsetParent) : obj.offsetLeft;
}
function pageY(obj) {
return obj.offsetParent ?
obj.offsetTop + pageY(obj.offsetParent) : obj.offsetTop;
}

3 楼 argont 2011-04-05

你试试这样，我刚写的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#main { float:right; height:500px; width:75%; background-color:#CCC; }
#left1 { float:left; height:245px; width:24%; background-color:#f00; margin-bottom:10px; }
#left2 { float:left; clear:left; height:245px; width:24%; background-color:#00f; }
</style>
<script type="text/javascript">
function setHeight(obj, v) { obj.style.height = obj.offsetHeight * v + "px" ; }
function setWidth(obj, v) { obj.style.width = obj.offsetWidth * v + "px"; }
function pageX(obj) {
	return obj.offsetParent ? 
		obj.offsetLeft += pageX(obj.offsetParent) : obj.offsetLeft;
}
function pageY(obj) {
	return obj.offsetParent ?
		obj.offsetTop += pageY(obj.offsetParent) : obj.offsetTop;
}

function zoom(obj,v) {
	var t = obj.cloneNode(true);
	t.onmouseover = function() { return false; }
	t.onmouseout = function() { this.parentNode.removeChild(this); }
	document.body.appendChild(t);
	
	setHeight(t, v);
	setWidth(t, v);
	t.style.position = "absolute";
	
	//不超出页面右侧的限制
	t.style.left = t.offsetWidth + pageX(obj) <= document.documentElement.offsetWidth ? pageX(obj) : pageX(obj) - ( t.offsetWidth - obj.offsetWidth) + "px";
	t.style.top  = pageY(obj) + "px";
}
</script>
</head>

<body>
<div id="main" onmouseover="zoom(this,1.25);">
</div>
<div id="left1" class="left" onmouseover="zoom(this, 1.25);">
</div>
<div id="left2" class="left" onmouseover="zoom(this, 1.25);">
</div>
</body>
</html>

2 楼 driftcloudy 2011-04-04

argont 写道

你用绝对定位？如果你面试，你会成功吗？

那三个div的情况下，要鼠标移上去放大，还有别的招么？

1 楼 argont 2011-04-04

你用绝对定位？如果你面试，你会成功吗？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论