[ 原创 ] 我也浅析阿里巴巴前端招聘考题 [ 另一种解决方案 ] (大家一起进来优化)

macji 楼主

博客阅读 >>

废话不多说,先往下看!


用css布局略过了，我们直接看用 javascript优化布局

由于我们的用户群喜欢放大看页面  

于是我们给上一题的布局做一次优化。  

当鼠标略过某个区块的时候，该区块会放大25%，  

并且其他的区块仍然固定不动。

  

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

关键字：javascript、封装、复用

放大有什么好处?

把模块放大肯定是为了保证残障人士或者一些特殊群体，同时也给普通用户群带来良好的体验。那放大，肯定是模块里面所有东西都得放大了包括图片等!在蓝色理想论坛已经有人写好了http://bbs.blueidea.com/thread-2824913-1-5.html，但完美主义是挑剔的。帖子写的很好，但如果放大模块上出现图片，他又要在js里面加上图片的放大效果，如果需求有更改，又给加上别的元素，那又要改？那岂不是变的很不灵活？下面我们做一个相对比较灵活的！怎么实现给卖个关子，请往下看

我们先写出布局

1. <style type="text/css" media="all">  
   
2. 
   
3. /* <![CDATA[ */  
   
4. 
   
5. body{margin:100px; font-size:62.5%}  
   
6. 
   
7. .box1{
   
8.   float:left;
   
9.   width:200px;  
   
10. 
    
11.   font-size:1.2em;
    
12.   background:#f30
    
13. }  
    
14. 
    
15. .box2{
    
16.   clear:left;
    
17.   float:left;
    
18.   width:200px;
    
19.   margin-top:10px;  
    
20. 
    
21.   font-size:1.2em;
    
22.   background:#f60
    
23. }  
    
24. 
    
25. .box3{
    
26.   width:200px;
    
27.   margin-left:210px;
    
28.   _margin-left:207px; /* ie6 */  
    
29. 
    
30.   font-size:1.2em;
    
31.   background:#f90
    
32. }  
    
33. 
    
34. p{margin:0; padding:1em; line-height:180%}
    
35. img{width:10em; height:2em; display:block}  
    
36. 
    
37. /* ]]> */  
    
38. 
    
39. </style>  
    
40. 
    
41. <!--这里给出html-->  
    
42. 
    
43. <div class="box1" id="container">
    
44.   <p>这是第一个可放大内容的区域,里面可能有N多元素和图片等!<img src="http://www.macji.com/wp-content/themes/macji/img/logo.png"   /></p>
    
45. </div>
    
46. <div class="box2" id="container2">
    
47.   <p>这是第一个可放大内容的区域,里面可能有N多元素和图片等!<img src="http://www.macji.com/wp-content/themes/macji/img/logo.png"  /></p>
    
48. </div>
    
49. <div class="box3">
    
50.   <p>这是第三个区域</p><p>这是第三个区域</p><p>这是第三个区域</p><p>这是第三个区域</p>
    
51. </div>

复制代码

你看到这里时候,没觉得不一样吧,是的,就是CSS单位都是em(除了布局用px,保证结构不乱),对,这是另一个思路,采用css可变单位em进行子元素控制.也许你就有了头绪吧?

我们把JavaScript封装一下

1. function zoom (contianer, config){
   
2.   this.config = config || {x: 1.25, y: 1.25};
   
3.   this.contianer = document.getElementById(contianer);
   
4.   var _this = this;  
   
5. 
   
6.   this.__construct = function (){ //构造函数
   
7.     _this.contianer.onmouseover = function (){_this.over();};
   
8.     _this.contianer.onmouseout  = function (){_this.out();};
   
9.   }();  
   
10. 
    
11.   this.over =  function (){ //鼠标经过
    
12.     var obj = _this.contianer;
    
13.     var width  = obj.offsetWidth;
    
14.     var height = obj.offsetHeight;  
    
15. 
    
16.     obj.style.position = 'relative';
    
17.     obj.style.zIndex = '100000';
    
18.     obj.style.fontSize = 1.2 * _this.config.x + 'em';
    
19.     obj.style.width = width * _this.config.x + 'px';
    
20.     obj.style.height = height * _this.config.y + 'px';
    
21.     obj.style.marginRight = (width - width * _this.config.x) + 'px';
    
22.     obj.style.marginBottom = (height - height * _this.config.y) + 'px';
    
23.   };  
    
24. 
    
25.   this.out = function (){ //鼠标离开
    
26.     var obj = _this.contianer;
    
27.     obj.style.position = '';
    
28.     obj.style.fontSize = '';
    
29.     obj.style.zIndex   = '';
    
30.     obj.style.width    = '';
    
31.     obj.style.height   = '';
    
32.     obj.style.marginRight = '';
    
33.     obj.style.marginBottom = '';
    
34.   };
    
35. }

复制代码

是不是很简单啊?调用方法,只需要把要放大的id和放大倍数传进去就可以了!
var container = new zoom(’container’, {x: 1.25, y: 1.25});
var container2 = new zoom(’container2′, {x: 1.25, y: 1.25});

给出演示地址 http://www.macji.com/lab/ali_job.html

[ 本帖最后由 caiying2007 于 2008-2-2 11:50 编辑 ]

sxnow

顶楼主的创意! 我都忘记了em单位了 果然 用em可以少写很多代码呢 参照字体 这个想法好好
不过设图片宽高都用em 总是感觉有点怪怪的

我来点优化意见 直接把new zoom(’container’, {x: 1.25, y: 1.25});写入<div class=" .....>里面 然后去call它

[ 本帖最后由 sxnow 于 2008-2-2 14:45 编辑 ]

macji 楼主

直接把new zoom(’container’, {x: 1.25, y: 1.25});写入<div class=" .....>里面

这想法好,但页面就显的不干净了,应该放在一个js文件里面,然后去包含它,这样比较干净,毕竟不是一个人在做项目

sxnow

不影响的啊 其它class还是生效的 比如<div id="L_1" class="Font_Blue Box_Zoom{Z:'125%',T:true}" ...> 我是这样写的

macji 楼主

恩,这样也不错,但我们一直主张着分离

mqycn

可惜不支持IE7,高手能不能把组合好的代码发出来看看~

[ 本帖最后由 mqycn 于 2008-2-5 20:25 编辑 ]

ariex

谁说不支持IE7，那个测试页我就用着没问题

macji 楼主

这是简单的布局,没有复杂css,支持各种浏览器.