08年阿里巴巴前端开发面试题

设置字体: 小中大

1.用CSS实现布局

提示：你可以先修改部分代码再运行。

2.用javascript优化布局

<!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>2008年阿里巴巴前端开发工程师面试题解</title> <style type="text/css">  </style> </head> <body>  <div class="demo"> <div id="first"></div> <div id="second"></div> <div id="third"></div> </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.border="1px solid #000" this.style.zIndex=1; // 设置z轴优先 } obj.onmouseout=function(){ // 鼠标移出，设回默认值 this.style.width=""; this.style.height=""; this.style.padding=""; this.style.backgroundColor=""; this.style.border=""; this.style.zIndex=""; } } zoom("first",1.25,1.25); zoom("second",1.25,1.25); zoom("third",1.25,1.25); </script> </body> </html>

提示：你可以先修改部分代码再运行。

原题：http://job.aliued.com/race/chooseRace/wd.html。

十二月 24th, 2009 in (x)Html/Css, JS/JQuery | tags: js, 面试题 | 1,797 次浏览

6 Comments

Kiya 说：

2009/12/28于9:03 上午

第二题没你想的那么简单的。你这样答就不会进了。
你没发现字也在放大吗？好好想想，这个CSS属性老外很爱用的。就算里面有图片也能放大的。
还有一个建议。如果你的代码用jQuery之类的来写。只要一个animate就够了。原生的还是复杂了点不过没有库小巧。
有用(3) 没用(1)

[回复]
hemin 回复:
十二月 28th, 2009 at 9:22 上午
@Kiya,
1.你确定字放大了？
2.你确定用CSS属性可以很好的在IE6下可以兼容性与开展性？
3.面试题难道去用框架，不用原始JS来实现？兄弟这是面试题，是用来靠你JS基础的

一题是考你CSS布局基础。
二题是考你JS基础的。
有用(0) 没用(5)

[回复]
Ant~ 回复:
三月 29th, 2010 at 5:10 下午
@hemin,
貌似字确实放大了……很明显……
另外，也不是说面试题就一定不能用框架，人家都说了“可以使用任何开源代码”……
当然，能自己写更好！
有用(0) 没用(0)

[回复]
丸子说：

2010/01/26于3:39 下午

嘿嘿嘿…路过一下下…这个写法不是很好….不灵活…
有用(0) 没用(0)

[回复]
Sun 说：

2010/03/31于5:50 下午

第一题完全可以不用hack 并且比你这个更好阿里的这个题目都出了这么久了 ~

1，考虑下ie6造成bug的原因是什么？
2，这个页面的主体部分在哪？该让用户先看到哪一块？
如果考虑了第二点那么也不存在用hack来解决ie6的bug了~

第二题是继续对第一题的改造，貌似按照原题的意思你题意也理解错了，题目很明显的要求是放大25%。还有为什么是通过获取的clientHeight 去计算赋值给height? 你确定clientHeight就一定等同于height吗？为什么不对同一个对象属性进行操作获取最终样式高度计算？还有既然是对同样的对象调用同样的方法~ 可以采用each这样的方法更加优越~
有用(2) 没用(0)

[回复]
最有效的减肥药说：

2010/05/16于9:56 下午

不错，这样的面试题很经典！
有用(0) 没用(0)

[回复]