请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
邮件列表客服QQ 800003860切换到窄版
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步，快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服 蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 【原创】浅析阿里巴巴前端招聘考题
123下一页
返回列表 发新帖
查看: 25472|回复: 88

[其它] 【原创】浅析阿里巴巴前端招聘考题 [复制链接]

zbm2001z　楼主

宝儿

荣誉管理

帖子
1600
体力
11357
威望
43
发表于 2008-1-16 18:32:10 |显示全部楼层
http://job.aliued.com/race/chooseRace/wd.html

用CSS实现布局

让我们一起来做一个页面

首先，我们需要一个布局。

请使用CSS控制3个div，实现如下图的布局。



--------------------------------------------------------------------------------------------

考察应试者的基本布局知识——浮动或绝对定位（显然，后者在流体布局各区块自适应内容高度的情况下并不适用）。

这里给一个通常的布局方案：
  1. <style type="text/css">
  2. div{background:#ccc;}
  3. h2{margin:0;}
  4. #firstly{
  5.         float:left;
  6.         width:200px;
  7. }
  8. #secondly{
  9.         clear:left;
  10.         float:left;
  11.         margin-top:10px;
  12.         width:200px;
  13. }
  14. #thirdly{
  15.         margin-left:210px;
  16. }
  17. </style>
  18. <div id="firstly"></div>
  19. <div id="secondly"></div>
  20. <div id="thirdly"></div>
复制代码

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



然而在IE6-中，当：
  1. <style type="text/css">
  2. div{background:#ccc;}
  3. h2{margin:0;}
  4. #firstly{
  5.         float:left;
  6.         width:200px;
  7. }
  8. #secondly{
  9.         clear:left;
  10.         float:left;
  11.         margin-top:10px;
  12.         width:200px;
  13. }
  14. #thirdly{
  15.         margin-left:210px;
  16.         width:400px; /* 然而在IE6-中，当width设定为除auto（默认值）以外的值时，触发Layout特性，会整体向右产生3像素偏移bug */
  17. }
  18. </style>
  19. <div id="firstly"></div>
  20. <div id="secondly"></div>
  21. <div id="thirdly"></div>
复制代码

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



或是：
  1. <style type="text/css">
  2. div{background:#ccc;}
  3. h2{margin:0;}
  4. #firstly{
  5.         float:left;
  6.         width:200px;
  7. }
  8. #secondly{
  9.         clear:left;
  10.         float:left;
  11.         margin-top:10px;
  12.         width:200px;
  13. }
  14. #thirdly{
  15.         margin-left:210px;
  16.         height:200px; /* 然而在IE6-中，当height设定为除auto（默认值）以外的值时，触发Layout特性，左边缘会向右产生3像素偏移bug */
  17. }
  18. </style>
  19. <div id="firstly"></div>
  20. <div id="secondly"></div>
  21. <div id="thirdly"></div>
复制代码

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



最终调整为一个比较健壮的流体布局方案：
  1. <style type="text/css">
  2. div{background:#ccc;}
  3. h2{margin:0;}
  4. #firstly{
  5.         float:left;
  6.         width:200px;
  7. }
  8. #secondly{
  9.         clear:left;
  10.         float:left;
  11.         margin-top:10px;
  12.         width:200px;
  13. }
  14. #thirdly{
  15.         -zoom:1; /* 在IE6-中，初始化触发Layout */
  16.         margin-left:210px;
  17.         -margin-left:207px; /* 修正IE6-中触发Layout后3像素偏移bug */
  18. }
  19. </style>
  20. <div id="firstly"></div>
  21. <div id="secondly"></div>
  22. <div id="thirdly"></div>
复制代码


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


[ 本帖最后由 zbm2001z 于 2008-1-16 18:34 编辑 ]
已有 1 人评分威望 收起 理由
wuleying + 1 很欣赏楼主这种对技术追求完美的态度, ...

总评分: 威望 + 1   查看全部评分

我家宝儿：http://blog.sina.com.cn/u/1258716075
西部数码顶级域名注册商39元抢注！

使用道具 举报

i700　
帖子
104
体力
68
威望
0
发表于 2008-1-16 18:38:53 |显示全部楼层
这题的目的是应聘者对考察IE和firefox两个浏览器的兼容处理能力？
还是什么其他的目的？
租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

gee218　
帖子
342
体力
682
威望
0
发表于 2008-1-16 18:42:46 |显示全部楼层
又学一招：-margin-left
http://gee218.blog.163.com

使用道具 举报

udbyygy　

心肠大大滴好

荣誉管理

帖子
1221
体力
9084
威望
4
发表于 2008-1-16 19:05:53 |显示全部楼层
兼容各种游览器和分辨率,我都是这种写法,不过要用6个DIV


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

[wma]http://jie.splan.cn/ggldl/梅艳芳.mp3[/wma]

使用道具 举报

zbm2001z　楼主

宝儿

荣誉管理

帖子
1600
体力
11357
威望
43
发表于 2008-1-16 19:11:21 |显示全部楼层
但是，完美主义者总是挑剔的：

当容器#firstly和容器#secondly宽度为百分比数时，为容器#thirdly设定margin-left的方式就会显得捉襟见肘——还需要一个额外的左边距

要实现原图效果，必须得为容器#thirdly内嵌套一个子容器。——哦！那不是完美主义者！

最终，比较完善且健壮的流体布局方案：

  1. <style type="text/css">
  2. div{background:#ccc;}
  3. h2{margin:0;}
  4. #firstly{
  5.         float:left;
  6.         width:20%;
  7.         margin-right:10px;
  8.         -margin-right:7px; /* 修正IE6-中3像素偏移bug */
  9. }
  10. #secondly{
  11.         clear:left;
  12.         float:left;
  13.         margin-top:10px;
  14.         width:20%;
  15. }
  16. #thirdly{
  17.         +zoom:1; /* 在IE中，初始化触发Layout */
  18.         /* 注意：现在IE中，为该容器设定margin-left值无效 */
  19. }
  20. </style>
  21. <div id="firstly"></div>
  22. <div id="secondly"></div>
  23. <div id="thirdly"></div>
复制代码

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


[ 本帖最后由 zbm2001z 于 2008-1-16 19:17 编辑 ]
我家宝儿：http://blog.sina.com.cn/u/1258716075

使用道具 举报

zbm2001z　楼主

宝儿

荣誉管理

帖子
1600
体力
11357
威望
43
发表于 2008-1-16 19:16:10 |显示全部楼层
考题还没完，继续下一题：

用javascript优化布局。

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

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

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

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



提示：

也许，我们其他的布局也会用到这个放大的效果哦。

可以使用任何开源代码，包括曾经你自己写的。

关键字：

javascript、封装、复用

-----------------------------------------------------------

回家……待续
我家宝儿：http://blog.sina.com.cn/u/1258716075

使用道具 举报

thornyzhl　

sarten

高级会员

帖子
563
体力
904
威望
2
居住地
安徽省 合肥市
发表于 2008-1-16 19:35:44 |显示全部楼层
嘿嘿，我这个不照么？不过我发现了一个小密码。。。
ff中你把x,y,z换成1,2,3      就么效果了

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


[ 本帖最后由 thornyzhl 于 2008-1-16 19:43 编辑 ]
http://www.055178.com/

使用道具 举报

liuhonggang521　
帖子
69
体力
219
威望
0
发表于 2008-1-16 19:38:59 |显示全部楼层
个人感觉这么写复杂了，还需要兼容浏览器。
个人感觉页面的左右结构是应该用HTML标签例如DIV给区分开的，里面的各个板块是是单独出来的，他们可能有相同的地方，所以里面的模块都是CLASS的。
例如下面的代码,虽然比楼主那么写DIV少了很多，但是结构不明显，而且貌似复杂了一些。
不过还是期待楼主的JS考题

  1. <div id="container">
  2.         <div id="leftCont">
  3.                 <div class="box1">
  4.                
  5.                 </div>
  6.                 <div class="box2">
  7.                
  8.                 </div>
  9.         </div>
  10.         <div id="rightCont">
  11.                 <div class="box3">
  12.                
  13.                 </div>
  14.         </div>
  15.         <div class="clear"></div>
  16. </div>
复制代码

使用道具 举报

thornyzhl　

sarten

高级会员

帖子
563
体力
904
威望
2
居住地
安徽省 合肥市
发表于 2008-1-16 19:39:10 |显示全部楼层

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


[ 本帖最后由 thornyzhl 于 2008-1-16 19:43 编辑 ]
http://www.055178.com/

使用道具 举报

maxegx　

佛三

银牌会员

帖子
1075
体力
2416
威望
0
居住地
四川省 眉山市
发表于 2008-1-16 19:50:57 |显示全部楼层
有没有这么复杂哦!
执著和骚扰只有一步之遥!

使用道具 举报

zbm2001z　楼主

宝儿

荣誉管理

帖子
1600
体力
11357
威望
43
发表于 2008-1-16 21:40:24 |显示全部楼层

回复 #5 zbm2001z 的帖子

补全5#楼——回家了，发现发帖超过60分钟不能再编辑了

但是，完美主义者总是挑剔的：

当容器#firstly和容器#secondly宽度为百分比数时，为容器#thirdly设定margin-left的方式就会显得捉襟见肘——还需要一个额外的左边距

要实现原图效果，必须得为容器#thirdly内嵌套一个子容器。——哦！那不是完美主义者！

最终，比较完善且健壮的流体布局方案：

  1. <style type="text/css">
  2. div{background:#ccc;}
  3. h2{margin:0;}
  4. #firstly{
  5.     float:left;
  6.     width:20%;
  7.     margin-right:10px;
  8.     -margin-right:7px; /* 修正IE6-中3像素偏移bug */
  9. }
  10. #secondly{
  11.     clear:left;
  12.     float:left;
  13.     margin-top:10px;
  14.     width:20%;
  15. }
  16. #thirdly{
  17.     overflow:auto; /* 或hidden值（可根据需求权衡） */
  18.     +zoom:1; /* 在IE中，初始化触发Layout */
  19.     /* 注意：现在IE中，避免为该容器设定margin-left值 */
  20. }
  21. </style>
  22. <div id="firstly"></div>
  23. <div id="secondly"></div>
  24. <div id="thirdly"></div>
复制代码


说明一下：

老鸟都知道，overflow特性涉及到CSS2标准规范中（CSS2.1做了进一步解释）容器检索其包含内容是否溢出，以及如何渲染的机制。

在该检索渲染机制中（值设为auto或hidden时）：

该容器会自动避开浮动于之上的元素对包含内容的位置影响，并在横向位置上跟随浮动元素的一侧，其跟随方向取决于浮动元素的浮动方向的另一侧。

最后，老老鸟知道该容器还会在z轴上向浏览者方向做一个偏移。


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


[ 本帖最后由 zbm2001z 于 2008-1-16 21:49 编辑 ]
我家宝儿：http://blog.sina.com.cn/u/1258716075

使用道具 举报

176626650　
帖子
180
体力
411
威望
0
发表于 2008-1-16 22:05:38 |显示全部楼层
这么麻烦的考题呀，刚看的时候还感觉挺简单的呢，没想到要考虑这么多的内容。

使用道具 举报

expression　
帖子
1038
体力
1649
威望
0
发表于 2008-1-16 22:43:52 |显示全部楼层
玩儿一个Table布局

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

使用道具 举报

gaoang　

angao

银牌会员 手机认证 

帖子
372
体力
2912
威望
1
发表于 2008-1-16 23:04:59 |显示全部楼层

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


[ 本帖最后由 gaoang 于 2008-1-16 23:07 编辑 ]
恩~~~

使用道具 举报

zbm2001z　楼主

宝儿

荣誉管理

帖子
1600
体力
11357
威望
43
发表于 2008-1-17 00:21:44 |显示全部楼层

回复 #6 zbm2001z 的帖子

let's go !

由于该题要求缩放元素不能对其它元素的位置产生影响，第一感觉就是绝对定位布局，闲话少说，先来布局：
  1. <style type="text/css">
  2. div{
  3.         position:absolute;
  4.         background:#ccc;
  5. }
  6. h2{margin:0;}
  7. #firstly{
  8.         top:10px;
  9.         left:10px;
  10.         width:200px;
  11.         height:200px;
  12. }
  13. #secondly{
  14.         top:220px;
  15.         left:10px;
  16.         width:200px;
  17.         height:200px;
  18. }
  19. #thirdly{
  20.         top:10px;
  21.         left:220px;
  22.         width:400px;
  23.         height:410px;
  24. }
  25. </style>

  27. <div id="firstly"></div>
  28. <div id="secondly"></div>
  29. <div id="thirdly"></div>
复制代码

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




接着，由于要求封装和复用，编写缩放函数：
  1. <script type="text/javascript">
  2. function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）
  3.         var obj=document.getElementById(id); // 获取元素对象
  4.         var dW=obj.clientWidth; // 获取元素可视区域宽度
  5.         var dH=obj.clientHeight; // 获取元素可视区域高度
  6.         obj.onmouseover=function(){ // 鼠标移入
  7.                 this.style.width=dW*x+"px"; // 横向缩放
  8.                 this.style.height=dH*y+"px"; // 纵向缩放
  9.                 this.style.backgroundColor="#f00"; // 设置调试背景
  10.                 this.style.zIndex=1; // 设置z轴优先
  11.         }
  12.         obj.onmouseout=function(){ // 鼠标移出，设回默认值
  13.                 this.style.width="";
  14.                 this.style.height="";
  15.                 this.style.backgroundColor="";
  16.                 this.style.zIndex="";
  17.         }
  18. }
  19. zoom("firstly",1.25,1.25);
  20. zoom("secondly",1.25,1.25);
  21. zoom("thirdly",1.25,1.25);
  22. </script>
复制代码

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



测试一下——基本没问题。

依旧是完美主义者，这里可能存在一些小问题，比如：

首先，页面布局中，如果容器设置了padding值（特别是该值相对较大时），这个缩放就是有偏差的了，如：

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



zoom("firstly",1,1);
zoom("secondly",1,1);
zoom("thirdly",1,1);
以上参数设置理论上应该是容器尺寸不变，但由于clientWidth和clientHeight包括了padding宽度，自然会产生缩放偏差。


还有，在设置z轴索引优先时，某些情况下也会有些问题，比如：这些容器在页面设计布局中如果已设定了z轴索引，就必须在脚本中手动调整当前缩放容器的z轴索引，然而，更好的模块封装总是希望更智能些。
关于这个问题，这里就不多做说明了。基本思路就是检索选定范围内的所有容器的z轴索引，设定当前缩放容器高于其中的最高z轴索引。

解决容器设置padding值时，缩放偏差的问题：
  1. <script type="text/javascript">
  2. function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
  3.         return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
  4. }
  5. function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）
  6.         var obj=document.getElementById(id); // 获取元素对象
  7.         var dP=getDefaultStyle(obj,"padding").split(" "); // 数组化元素各方向padding值
  8.         var dPL=dP.length; // 返回该数组长度
  9.         if(dPL=1){if(!dP[0]){dP[0]="0px"}dP.push(dP[0],dP[0],dP[0])}else if(dPL=2){dP.push(dP[0],dP[1])}else if(dPL=3){dP.push(dP[1])}; // 调整dom标准下padding默认值为空成0px，以及补全padding样式缩写值为4个方向值
  10.         var dP0=parseInt(dP[0]),dP1=parseInt(dP[1]),dP2=parseInt(dP[2]),dP3=parseInt(dP[3]); // 获取元素4个方向padding数值
  11.         var dW=obj.clientWidth-dP1-dP3; // 获取元素宽度
  12.         var dH=obj.clientHeight-dP0-dP2; // 获取元素高度
  13.         obj.onmouseover=function(){ // 鼠标移入
  14.                 this.style.width=dW*x+"px"; // 横向缩放
  15.                 this.style.height=dH*y+"px"; // 纵向缩放
  16.                 this.style.padding=dP0*y+"px "+dP1*x+"px "+dP2*y+"px "+dP3*x+"px "; // 纵、横向padding缩放
  17.                 this.style.backgroundColor="#f00"; // 设置调试背景
  18.                 this.style.zIndex=1; // 设置z轴优先
  19.         }
  20.         obj.onmouseout=function(){ // 鼠标移出，设回默认值
  21.                 this.style.width="";
  22.                 this.style.height="";
  23.                 this.style.padding="";
  24.                 this.style.backgroundColor="";
  25.                 this.style.zIndex="";
  26.         }
  27. }
  28. zoom("firstly",1,1);
  29. zoom("secondly",1,1);
  30. zoom("thirdly",1,1);
  31. </script>
复制代码

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


[ 本帖最后由 zbm2001z 于 2008-1-17 00:31 编辑 ]
我家宝儿：http://blog.sina.com.cn/u/1258716075

使用道具 举报

zbm2001z　楼主

宝儿

荣誉管理

帖子
1600
体力
11357
威望
43
发表于 2008-1-17 01:29:34 |显示全部楼层
再调整下楼上的问题：
  1. <script type="text/javascript">
  2. function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
  3.         return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
  4. }
  5. function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）
  6.         var obj=document.getElementById(id); // 获取元素对象
  7.         var dP0=getDefaultStyle(obj,"paddingTop");
  8.         var dP1=getDefaultStyle(obj,"paddingRight");
  9.         var dP2=getDefaultStyle(obj,"paddingBottom");
  10.         var dP3=getDefaultStyle(obj,"paddingLeft"); // 获取元素各方向padding值
  11.         var dP0=parseInt(dP0),dP1=parseInt(dP1),dP2=parseInt(dP2),dP3=parseInt(dP3); // 获取元素4个方向padding数值
  12.         var dW=obj.clientWidth-dP1-dP3; // 获取元素宽度
  13.         var dH=obj.clientHeight-dP0-dP2; // 获取元素高度
  14.         obj.onmouseover=function(){ // 鼠标移入
  15.                 this.style.width=dW*x+"px"; // 横向缩放
  16.                 this.style.height=dH*y+"px"; // 纵向缩放
  17.                 this.style.padding=dP0*y+"px "+dP1*x+"px "+dP2*y+"px "+dP3*x+"px "; // 纵、横向padding缩放
  18.                 this.style.backgroundColor="#f00"; // 设置调试背景
  19.                 this.style.zIndex=1; // 设置z轴优先
  20.         }
  21.         obj.onmouseout=function(){ // 鼠标移出，设回默认值
  22.                 this.style.width="";
  23.                 this.style.height="";
  24.                 this.style.padding="";
  25.                 this.style.backgroundColor="";
  26.                 this.style.zIndex="";
  27.         }
  28. }
  29. zoom("firstly",1.25,1.25);
  30. zoom("secondly",1.25,1.25);
  31. zoom("thirdly",1,1);
  32. </script>
复制代码

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

我家宝儿：http://blog.sina.com.cn/u/1258716075

使用道具 举报

520css　
帖子
64
体力
134
威望
0
发表于 2008-1-17 01:47:28 |显示全部楼层
做个记号再来看

使用道具 举报

zbm2001z　楼主

宝儿

荣誉管理

帖子
1600
体力
11357
威望
43
发表于 2008-1-17 02:15:03 |显示全部楼层
让我们回到流体布局吧——完美主义者！

完美主义者的理想，完善的流体布局缩放：

  1. <script type="text/javascript">
  2. function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
  3.         return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
  4. }
  5. function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）
  6.         var obj=document.getElementById(id); // 获取元素对象
  7.         var dP0=getDefaultStyle(obj,"paddingTop");
  8.         var dP1=getDefaultStyle(obj,"paddingRight");
  9.         var dP2=getDefaultStyle(obj,"paddingBottom");
  10.         var dP3=getDefaultStyle(obj,"paddingLeft"); // 获取元素各方向padding值
  11.         var dP0=parseInt(dP0),dP1=parseInt(dP1),dP2=parseInt(dP2),dP3=parseInt(dP3); // 获取元素4个方向padding数值
  12.         var dW=obj.clientWidth-dP1-dP3; // 获取元素宽度
  13.         var dH=obj.clientHeight-dP0-dP2; // 获取元素高度
  14.         var dMR=getDefaultStyle(obj,"marginRight");if(dMR=="auto")dMR=0; // 获取元素margin-right
  15.         var dMB=getDefaultStyle(obj,"marginBottom");if(dMB=="auto")dMB=0; // 获取元素margin-bottom
  16.         var dZ=getDefaultStyle(obj,"zIndex"); //获取元素z轴索引（依需求可选）
  17.         obj.onmouseover=function(){ // 鼠标移入
  18.                 this.style.position="relative"; // 设置相对定位，z轴索引向浏览者偏移
  19.                 this.style.zIndex=dZ+1; // 再设置z轴优先（依需求可选）
  20.                 this.style.marginRight=-(parseInt(dW*x)-dW)-(parseInt(dP1*x)-dP1)-(parseInt(dP3*x)-dP3)+parseInt(dMR)+"px"; // 根据容器横向缩放，反向margin-right补位
  21.                 this.style.marginBottom=-(parseInt(dH*y)-dH)-(parseInt(dP0*y)-dP0)-(parseInt(dP2*y)-dP2)+parseInt(dMB)+"px"; //  根据容器纵向缩放，反向margin-bottom补位
  22.                 if(parseInt(this.style.marginBottom))this.style.overflow="hidden"; /*  适应缩小效果 */
  23.                 this.style.padding=parseInt(dP0*y)+"px "+parseInt(dP1*x)+"px "+parseInt(dP2*y)+"px "+parseInt(dP3*x)+"px "; // 纵、横向padding缩放
  24.                 this.style.width=parseInt(dW*x)+"px"; // 横向缩放
  25.                 this.style.height=parseInt(dH*y)+"px"; // 纵向缩放
  26.                 this.style.backgroundColor="#f00"; // 设置调试背景
  27.         }
  28.         obj.onmouseout=function(){
  29.                 this.style.position="";
  30.                 this.style.zIndex="";
  31.                 this.style.marginRight="";
  32.                 this.style.marginBottom="";
  33.                 this.style.padding="";
  34.                 this.style.width="";
  35.                 this.style.height="";
  36.                 this.style.backgroundColor="";
  37.         }
  38. }
  39. zoom("firstly",1.5,1.5);
  40. zoom("secondly",1,1);
  41. zoom("thirdly",0.5,0.5);
  42. </script>
复制代码

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


[ 本帖最后由 zbm2001z 于 2008-1-17 02:46 编辑 ]
我家宝儿：http://blog.sina.com.cn/u/1258716075

使用道具 举报

comasp　
帖子
465
体力
1681
威望
0
发表于 2008-1-17 10:22:25 |显示全部楼层
楼上代码 IE7 有问题。
新书推荐：<<锋利的jQuery>>

使用道具 举报

zbm2001z　楼主

宝儿

荣誉管理

帖子
1600
体力
11357
威望
43
发表于 2008-1-17 11:33:06 |显示全部楼层
有点时间，继续优化：
  1. <script type="text/javascript">
  2. function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
  3.         return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
  4. }
  5. function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）
  6.         var obj=document.getElementById(id); // 获取元素对象
  7.         /* 以下实际值计算全部忽略小数，遇小数统一向上或向下取值，避免各浏览器取值方式干扰 */
  8.         var dO=getDefaultStyle(obj,"overflow");
  9.         var dP0=getDefaultStyle(obj,"paddingTop"),dP0=parseInt(dP0),dP0Y=parseInt(dP0*y); // 获取元素各方向padding值、padding缩放值
  10.         var dP1=getDefaultStyle(obj,"paddingRight"),dP1=parseInt(dP1),dP1X=parseInt(dP1*x);
  11.         var dP2=getDefaultStyle(obj,"paddingBottom"),dP2=parseInt(dP2),dP2Y=parseInt(dP2*y);
  12.         var dP3=getDefaultStyle(obj,"paddingLeft"),dP3=parseInt(dP3),dP3X=parseInt(dP3*x);
  13.         var dW=obj.clientWidth-dP1-dP3,dWX=parseInt(dW*x); // 获取元素宽度、缩放宽度
  14.         var dH=obj.clientHeight-dP0-dP2,dHY=parseInt(dH*y); // 获取元素高度、缩放高度
  15.         var dMR=getDefaultStyle(obj,"marginRight");if(dMR=="auto")dMR=0;var pdMR=parseInt(dMR); // 获取元素margin-right数值
  16.         var dMB=getDefaultStyle(obj,"marginBottom");if(dMB=="auto")dMB=0;var pdMB=parseInt(dMB); // 获取元素margin-bottom数值
  17.         var dZ=getDefaultStyle(obj,"zIndex"); //获取元素z轴索引（依需求可选）
  18.         obj.onmouseover=function(){ // 鼠标移入
  19.                 if((x<1 || y<1) && dO!="auto" && dO!="hidden")this.style.overflow="auto"; // 适应缩小效果（依需求或可设值为hidden）
  20.                 this.style.position="relative"; // 设置相对定位，z轴索引向浏览者偏移
  21.                 this.style.zIndex=dZ+1; // 再设置z轴优先（依需求可选）
  22.                 this.style.marginRight=-(dWX-dW)-(dP1X-dP1)-(dP3X-dP3)+pdMR+"px"; // 根据容器横向缩放，设置反向margin-right补位
  23.                 this.style.marginBottom=-(dHY-dH)-(dP0Y-dP0)-(dP2Y-dP2)+pdMB+"px"; //  根据容器纵向缩放，设置反向margin-bottom补位
  24.                 this.style.padding=dP0Y+"px "+dP1X+"px "+dP2Y+"px "+dP3X+"px "; // 设置padding纵、横向缩放
  25.                 this.style.width=dWX+"px"; // 设置横向缩放
  26.                 this.style.height=dHY+"px"; // 设置纵向缩放
  27.                 this.style.backgroundColor="#f00"; // 设置调试背景
  28.         }
  29.         obj.onmouseout=function(){
  30.                 this.style.position="";
  31.                 this.style.zIndex="";
  32.                 this.style.marginRight="";
  33.                 this.style.marginBottom="";
  34.                 this.style.padding="";
  35.                 this.style.width="";
  36.                 this.style.height="";
  37.                 this.style.backgroundColor="";
  38.         }
  39. }
  40. zoom("firstly",2,1.5);
  41. zoom("secondly",1,1);
  42. zoom("thirdly",0.5,2);
  43. </script>
复制代码

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


[ 本帖最后由 zbm2001z 于 2008-1-17 11:42 编辑 ]
我家宝儿：http://blog.sina.com.cn/u/1258716075

使用道具 举报

cokil　
帖子
8
体力
22
威望
0
发表于 2008-1-17 15:01:39 |显示全部楼层

发现BUG ==》FF下

初看正常，但是在FF下，鼠标事件触发一次以后，鼠标位置在#thirdly的右边，然后你就会发现了~

使用道具 举报

zbm2001z　楼主

宝儿

荣誉管理

帖子
1600
体力
11357
威望
43
发表于 2008-1-17 15:06:15 |显示全部楼层
那是在缩小情况下mouseover后，鼠标自然mouseout的行为，好好理解下吧

不只是在FF下，是在所有的浏览器里都会有这种现象，如果没有就真是有BUG了
我家宝儿：http://blog.sina.com.cn/u/1258716075

使用道具 举报

zbm2001z　楼主

宝儿

荣誉管理

帖子
1600
体力
11357
威望
43
发表于 2008-1-17 15:29:39 |显示全部楼层
大封装：
setZoom(obj,x,y,tagName,className)

指定元素对象：
setZoom(document.getElementById("firstly"),1.25,1.25)

指定元素对象id：
setZoom("firstly",1.25,1.25)

指定标签名元素集合对象：
setZoom(document,1.25,1.25,"div")  或


指定包含指定样式名的元素集合：
setZoom(document,1.25,1.25,"*","zoom")  或
setZoom(document,1.25,1.25,"div","zoom")  

  1. <script type="text/javascript">
  2. function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
  3.         return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
  4. }
  5. function setZoom(obj,x,y,tagName,className){ // 设置执行缩放对象函数
  6. /* 参数：
  7.    1、DOM元素对象或容器id，并根据是否设置了tagName参数来判断是否赋予该容器缩放
  8.    2、横向缩放倍数
  9.    3、纵向缩放倍数
  10.    4、标签名（若设定该参数，获取前设定DOM元素对象或指定ID容器包含的所有该标签元素子集，并根据是否设置了className参数来判断是否赋予这些元素缩放）
  11.    5、样式名（若设定该参数，获取前设定标签子集元素中包含该样式的元素集合，并赋予它们缩放）
  12. */
  13.         if(typeof(obj)!="object"){var obj=document.getElementById(obj);}
  14.         if(tagName){
  15.                 if(obj.all && !window.opera){
  16.                         if(tagName=="*"){
  17.                                 var tags=obj.all;
  18.                         }else{
  19.                                 var tags=obj.all.tags(tagName);
  20.                         }
  21.                 }else{
  22.                         var tags=obj.getElementsByTagName(tagName);
  23.                 };
  24.                 if(className){
  25.                         for(var i=0;i<tags.length;i++){
  26.                                 if(RegExp("( ?|^)"+className+"\\b").test(tags[i].className)){
  27.                                         zoom(tags[i],x,y);
  28.                                 }
  29.                         }
  30.                 }else{
  31.                         for(var i=0;i<tags.length;i++){
  32.                                 zoom(tags[i],x,y);
  33.                         }
  34.                 };
  35.         }else if(obj!=document){
  36.                 zoom(obj,x,y);
  37.         }
  38. }
  39. function zoom(obj,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数
  40.         /*var obj=document.getElementById(id); // 获取元素对象*/
  41.         // 以下实际值计算全部忽略小数，遇小数统一向上或向下取值，避免各浏览器取值方式干扰
  42.         var dO=getDefaultStyle(obj,"overflow");
  43.         var dP0=getDefaultStyle(obj,"paddingTop"),dP0=parseInt(dP0),dP0Y=parseInt(dP0*y); // 获取元素各方向padding值、padding缩放值
  44.         var dP1=getDefaultStyle(obj,"paddingRight"),dP1=parseInt(dP1),dP1X=parseInt(dP1*x);
  45.         var dP2=getDefaultStyle(obj,"paddingBottom"),dP2=parseInt(dP2),dP2Y=parseInt(dP2*y);
  46.         var dP3=getDefaultStyle(obj,"paddingLeft"),dP3=parseInt(dP3),dP3X=parseInt(dP3*x);
  47.         var dW=obj.clientWidth-dP1-dP3,dWX=parseInt(dW*x); // 获取元素宽度、缩放宽度
  48.         var dH=obj.clientHeight-dP0-dP2,dHY=parseInt(dH*y); // 获取元素高度、缩放高度
  49.         var dMR=getDefaultStyle(obj,"marginRight");if(dMR=="auto")dMR=0;var pdMR=parseInt(dMR); // 获取元素margin-right数值
  50.         var dMB=getDefaultStyle(obj,"marginBottom");if(dMB=="auto")dMB=0;var pdMB=parseInt(dMB); // 获取元素margin-bottom数值
  51.         var dZ=getDefaultStyle(obj,"zIndex"); //获取元素z轴索引（依需求可选）
  52.         obj.onmouseover=function(){ // 鼠标移入
  53.                 if((x<1 || y<1) && dO!="auto" && dO!="hidden")this.style.overflow="auto"; // 适应缩小效果（依需求或可设值为hidden）
  54.                 this.style.position="relative"; // 设置相对定位，z轴索引向浏览者偏移
  55.                 this.style.zIndex=dZ+1; // 再设置z轴优先（依需求可选）
  56.                 this.style.marginRight=-(dWX-dW)-(dP1X-dP1)-(dP3X-dP3)+pdMR+"px"; // 根据容器横向缩放，设置反向margin-right补位
  57.                 this.style.marginBottom=-(dHY-dH)-(dP0Y-dP0)-(dP2Y-dP2)+pdMB+"px"; //  根据容器纵向缩放，设置反向margin-bottom补位
  58.                 this.style.padding=dP0Y+"px "+dP1X+"px "+dP2Y+"px "+dP3X+"px "; // 设置padding纵、横向缩放
  59.                 this.style.width=dWX+"px"; // 设置横向缩放
  60.                 this.style.height=dHY+"px"; // 设置纵向缩放
  61.                 this.style.backgroundColor="#f00"; // 设置调试背景
  62.         }
  63.         obj.onmouseout=function(){
  64.                 this.style.position="";
  65.                 this.style.zIndex="";
  66.                 this.style.marginRight="";
  67.                 this.style.marginBottom="";
  68.                 this.style.padding="";
  69.                 this.style.width="";
  70.                 this.style.height="";
  71.                 this.style.backgroundColor="";
  72.         }
  73. }
  74. setZoom(document,1.5,1.5,"div","zoom");
  75. </script>
复制代码

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

我家宝儿：http://blog.sina.com.cn/u/1258716075

使用道具 举报

fkueaps　
帖子
978
体力
3867
威望
4
发表于 2008-1-17 16:19:21 |显示全部楼层
我喜欢用样式的相对单位来做缩放，而不是用JS做过程。

PS：我要上诉，状告宝儿QJ样式表！
俺滴blog

使用道具 举报

zbm2001z　楼主

宝儿

荣誉管理

帖子
1600
体力
11357
威望
43
发表于 2008-1-17 16:56:42 |显示全部楼层
那好，用样式表：

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


[ 本帖最后由 zbm2001z 于 2008-1-17 17:15 编辑 ]
我家宝儿：http://blog.sina.com.cn/u/1258716075

使用道具 举报

wuleying　

罗亮

超级版主 手机认证 

帖子
15893
体力
19481
威望
19
居住地
北京市 海淀区
发表于 2008-1-17 17:09:17 |显示全部楼层

回复 #24 fkueaps 的帖子

考虑到IE7以下版本对伪类的不支持，这种效果用JS做应该是正确的..
银子博客 | 歪藕 | 新浪围脖 | 腾迅围脖

使用道具 举报

panda　

用户体验

高级会员

帖子
1028
体力
860
威望
7
发表于 2008-1-18 10:08:03 |显示全部楼层
这么早就有人在写攻略了啊，别的试题也欢迎大家写，我们回头公布答案，哈哈
http://www.flickr.com/photos/pandalee/

使用道具 举报

justin_xuzhan　
帖子
89
体力
13
威望
0
居住地
浙江省 杭州市
发表于 2008-1-18 10:09:51 |显示全部楼层
=========================
由于我们的用户群喜欢放大看页面

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

同学们，看上去，是想要给布局做一次优化啊。如果用absolute来做，那不是又不能像LZ所说的“在流体布局各区块自适应内容高度的情况下并不适用”？
alldone.cn

使用道具 举报

justin_xuzhan　
帖子
89
体力
13
威望
0
居住地
浙江省 杭州市
发表于 2008-1-18 10:11:36 |显示全部楼层
这个第二道JS的题，出得很高深啊。
alldone.cn

使用道具 举报

eyunfeis　
帖子
18
体力
5
威望
0
发表于 2008-1-18 10:23:18 |显示全部楼层
不错,题目很有特色~~~

[ 本帖最后由 eyunfeis 于 2008-1-18 10:31 编辑 ]

使用道具 举报

123下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Html Smilies
您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-11 19:44 , Processed in 0.170686 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部