一道阿里前端笔试题

最新推荐文章于 2020-04-05 11:18:35 发布

最新推荐文章于 2020-04-05 11:18:35 发布 · 170 阅读

文章标签：

#Dojo #CSS #XHTML #HTML #JavaScript #ViewUI

笔试面试专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用CSS实现特定布局，并通过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，天天在用，也就顺手了。