打印

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

本主题由 zhuyinhong 于 2009-3-12 10:25 分类
http://job.aliued.com/race/chooseRace/wd.html

用CSS实现布局

让我们一起来做一个页面

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

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



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

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

这里给一个通常的布局方案:
复制内容到剪贴板
代码:
<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
    float:left;
    width:200px;
}
#secondly{
    clear:left;
    float:left;
    margin-top:10px;
    width:200px;
}
#thirdly{
    margin-left:210px;
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>


 提示:您可以先修改部分代码再运行
然而在IE6-中,当:
复制内容到剪贴板
代码:
<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
    float:left;
    width:200px;
}
#secondly{
    clear:left;
    float:left;
    margin-top:10px;
    width:200px;
}
#thirdly{
    margin-left:210px;
    width:400px; /* 然而在IE6-中,当width设定为除auto(默认值)以外的值时,触发Layout特性,会整体向右产生3像素偏移bug */
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>


 提示:您可以先修改部分代码再运行
或是:
复制内容到剪贴板
代码:
<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
    float:left;
    width:200px;
}
#secondly{
    clear:left;
    float:left;
    margin-top:10px;
    width:200px;
}
#thirdly{
    margin-left:210px;
    height:200px; /* 然而在IE6-中,当height设定为除auto(默认值)以外的值时,触发Layout特性,左边缘会向右产生3像素偏移bug */
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>


 提示:您可以先修改部分代码再运行
最终调整为一个比较健壮的流体布局方案:
复制内容到剪贴板
代码:
<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
    float:left;
    width:200px;
}
#secondly{
    clear:left;
    float:left;
    margin-top:10px;
    width:200px;
}
#thirdly{
    -zoom:1; /* 在IE6-中,初始化触发Layout */
    margin-left:210px;
    -margin-left:207px; /* 修正IE6-中触发Layout后3像素偏移bug */
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>


 提示:您可以先修改部分代码再运行
[ 本帖最后由 zbm2001z 于 2008-1-16 18:34 编辑 ]
本帖最近评分记录
  • wuleying 威望 +1 很欣赏楼主这种对技术追求完美的态度, ... 2008-1-17 15:51
这题的目的是应聘者对考察IE和firefox两个浏览器的兼容处理能力?
还是什么其他的目的?
又学一招:-margin-left

TOP

认证您的手机,获得手机认证图标, 更多手机认证的好处
兼容各种游览器和分辨率,我都是这种写法,不过要用6个DIV

 提示:您可以先修改部分代码再运行
[wma]http://jie.splan.cn/ggldl/梅艳芳.mp3[/wma]
但是,完美主义者总是挑剔的:

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

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

最终,比较完善且健壮的流体布局方案:
复制内容到剪贴板
代码:
<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
    float:left;
    width:20%;
    margin-right:10px;
    -margin-right:7px; /* 修正IE6-中3像素偏移bug */
}
#secondly{
    clear:left;
    float:left;
    margin-top:10px;
    width:20%;
}
#thirdly{
    +zoom:1; /* 在IE中,初始化触发Layout */
    /* 注意:现在IE中,为该容器设定margin-left值无效 */
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>


 提示:您可以先修改部分代码再运行
[ 本帖最后由 zbm2001z 于 2008-1-16 19:17 编辑 ]

TOP

考题还没完,继续下一题:

用javascript优化布局。

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

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

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

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



提示:

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

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

关键字:

javascript、封装、复用

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

回家……待续

TOP

嘿嘿,我这个不照么?不过我发现了一个小密码。。。
ff中你把x,y,z换成1,2,3      就么效果了

 提示:您可以先修改部分代码再运行
[ 本帖最后由 thornyzhl 于 2008-1-16 19:43 编辑 ]
摆pos抽香烟

TOP

个人感觉这么写复杂了,还需要兼容浏览器。
个人感觉页面的左右结构是应该用HTML标签例如DIV给区分开的,里面的各个板块是是单独出来的,他们可能有相同的地方,所以里面的模块都是CLASS的。
例如下面的代码,虽然比楼主那么写DIV少了很多,但是结构不明显,而且貌似复杂了一些。
不过还是期待楼主的JS考题
复制内容到剪贴板
代码:
<div id="container">
    <div id="leftCont">
        <div class="box1">
        
        </div>
        <div class="box2">
        
        </div>
    </div>
    <div id="rightCont">
        <div class="box3">
        
        </div>
    </div>
    <div class="clear"></div>
</div>

TOP



 提示:您可以先修改部分代码再运行
[ 本帖最后由 thornyzhl 于 2008-1-16 19:43 编辑 ]
摆pos抽香烟

TOP

有没有这么复杂哦!

TOP

回复 #5 zbm2001z 的帖子

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

但是,完美主义者总是挑剔的:

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

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

最终,比较完善且健壮的流体布局方案:
复制内容到剪贴板
代码:
<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
    float:left;
    width:20%;
    margin-right:10px;
    -margin-right:7px; /* 修正IE6-中3像素偏移bug */
}
#secondly{
    clear:left;
    float:left;
    margin-top:10px;
    width:20%;
}
#thirdly{
    overflow:auto; /* 或hidden值(可根据需求权衡) */
    +zoom:1; /* 在IE中,初始化触发Layout */
    /* 注意:现在IE中,避免为该容器设定margin-left值 */
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>
说明一下:

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

在该检索渲染机制中(值设为auto或hidden时):

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

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

 提示:您可以先修改部分代码再运行
[ 本帖最后由 zbm2001z 于 2008-1-16 21:49 编辑 ]

TOP

这么麻烦的考题呀,刚看的时候还感觉挺简单的呢,没想到要考虑这么多的内容。

TOP

玩儿一个Table布局

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

TOP



 提示:您可以先修改部分代码再运行
[ 本帖最后由 gaoang 于 2008-1-16 23:07 编辑 ]
尚在人间

TOP

回复 #6 zbm2001z 的帖子

let's go !

由于该题要求缩放元素不能对其它元素的位置产生影响,第一感觉就是绝对定位布局,闲话少说,先来布局:
复制内容到剪贴板
代码:
<style type="text/css">
div{
    position:absolute;
    background:#ccc;
}
h2{margin:0;}
#firstly{
    top:10px;
    left:10px;
    width:200px;
    height:200px;
}
#secondly{
    top:220px;
    left:10px;
    width:200px;
    height:200px;
}
#thirdly{
    top:10px;
    left:220px;
    width:400px;
    height:410px;
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>


 提示:您可以先修改部分代码再运行
接着,由于要求封装和复用,编写缩放函数:
复制内容到剪贴板
代码:
<script type="text/javascript">
function zoom(id,x,y){ // 设置缩放函数参数:容器id、横向缩放倍数、纵向缩放倍数(等比例缩放时也可以设定一个参数)
    var obj=document.getElementById(id); // 获取元素对象
    var dW=obj.clientWidth; // 获取元素可视区域宽度
    var dH=obj.clientHeight; // 获取元素可视区域高度
    obj.onmouseover=function(){ // 鼠标移入
        this.style.width=dW*x+"px"; // 横向缩放
        this.style.height=dH*y+"px"; // 纵向缩放
        this.style.backgroundColor="#f00"; // 设置调试背景
        this.style.zIndex=1; // 设置z轴优先
    }
    obj.onmouseout=function(){ // 鼠标移出,设回默认值
        this.style.width="";
        this.style.height="";
        this.style.backgroundColor="";
        this.style.zIndex="";
    }
}
zoom("firstly",1.25,1.25);
zoom("secondly",1.25,1.25);
zoom("thirdly",1.25,1.25);
</script>


 提示:您可以先修改部分代码再运行
测试一下——基本没问题。

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

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

 提示:您可以先修改部分代码再运行
zoom("firstly",1,1);
zoom("secondly",1,1);
zoom("thirdly",1,1);
以上参数设置理论上应该是容器尺寸不变,但由于clientWidth和clientHeight包括了padding宽度,自然会产生缩放偏差。


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

解决容器设置padding值时,缩放偏差的问题:
复制内容到剪贴板
代码:
<script type="text/javascript">
function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性
    return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
function zoom(id,x,y){ // 设置缩放函数参数:容器id、横向缩放倍数、纵向缩放倍数(等比例缩放时也可以设定一个参数)
    var obj=document.getElementById(id); // 获取元素对象
    var dP=getDefaultStyle(obj,"padding").split(" "); // 数组化元素各方向padding值
    var dPL=dP.length; // 返回该数组长度
    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个方向值
    var dP0=parseInt(dP[0]),dP1=parseInt(dP[1]),dP2=parseInt(dP[2]),dP3=parseInt(dP[3]); // 获取元素4个方向padding数值
    var dW=obj.clientWidth-dP1-dP3; // 获取元素宽度
    var dH=obj.clientHeight-dP0-dP2; // 获取元素高度
    obj.onmouseover=function(){ // 鼠标移入
        this.style.width=dW*x+"px"; // 横向缩放
        this.style.height=dH*y+"px"; // 纵向缩放
        this.style.padding=dP0*y+"px "+dP1*x+"px "+dP2*y+"px "+dP3*x+"px "; // 纵、横向padding缩放
        this.style.backgroundColor="#f00"; // 设置调试背景
        this.style.zIndex=1; // 设置z轴优先
    }
    obj.onmouseout=function(){ // 鼠标移出,设回默认值
        this.style.width="";
        this.style.height="";
        this.style.padding="";
        this.style.backgroundColor="";
        this.style.zIndex="";
    }
}
zoom("firstly",1,1);
zoom("secondly",1,1);
zoom("thirdly",1,1);
</script>


 提示:您可以先修改部分代码再运行
[ 本帖最后由 zbm2001z 于 2008-1-17 00:31 编辑 ]

TOP

再调整下楼上的问题:
复制内容到剪贴板
代码:
<script type="text/javascript">
function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性
    return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
function zoom(id,x,y){ // 设置缩放函数参数:容器id、横向缩放倍数、纵向缩放倍数(等比例缩放时也可以设定一个参数)
    var obj=document.getElementById(id); // 获取元素对象
    var dP0=getDefaultStyle(obj,"paddingTop");
    var dP1=getDefaultStyle(obj,"paddingRight");
    var dP2=getDefaultStyle(obj,"paddingBottom");
    var dP3=getDefaultStyle(obj,"paddingLeft"); // 获取元素各方向padding值
    var dP0=parseInt(dP0),dP1=parseInt(dP1),dP2=parseInt(dP2),dP3=parseInt(dP3); // 获取元素4个方向padding数值
    var dW=obj.clientWidth-dP1-dP3; // 获取元素宽度
    var dH=obj.clientHeight-dP0-dP2; // 获取元素高度
    obj.onmouseover=function(){ // 鼠标移入
        this.style.width=dW*x+"px"; // 横向缩放
        this.style.height=dH*y+"px"; // 纵向缩放
        this.style.padding=dP0*y+"px "+dP1*x+"px "+dP2*y+"px "+dP3*x+"px "; // 纵、横向padding缩放
        this.style.backgroundColor="#f00"; // 设置调试背景
        this.style.zIndex=1; // 设置z轴优先
    }
    obj.onmouseout=function(){ // 鼠标移出,设回默认值
        this.style.width="";
        this.style.height="";
        this.style.padding="";
        this.style.backgroundColor="";
        this.style.zIndex="";
    }
}
zoom("firstly",1.25,1.25);
zoom("secondly",1.25,1.25);
zoom("thirdly",1,1);
</script>


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

TOP

做个记号再来看

TOP

让我们回到流体布局吧——完美主义者!

完美主义者的理想,完善的流体布局缩放:
复制内容到剪贴板
代码:
<script type="text/javascript">
function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性
    return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
function zoom(id,x,y){ // 设置缩放函数参数:容器id、横向缩放倍数、纵向缩放倍数(等比例缩放时也可以设定一个参数)
    var obj=document.getElementById(id); // 获取元素对象
    var dP0=getDefaultStyle(obj,"paddingTop");
    var dP1=getDefaultStyle(obj,"paddingRight");
    var dP2=getDefaultStyle(obj,"paddingBottom");
    var dP3=getDefaultStyle(obj,"paddingLeft"); // 获取元素各方向padding值
    var dP0=parseInt(dP0),dP1=parseInt(dP1),dP2=parseInt(dP2),dP3=parseInt(dP3); // 获取元素4个方向padding数值
    var dW=obj.clientWidth-dP1-dP3; // 获取元素宽度
    var dH=obj.clientHeight-dP0-dP2; // 获取元素高度
    var dMR=getDefaultStyle(obj,"marginRight");if(dMR=="auto")dMR=0; // 获取元素margin-right
    var dMB=getDefaultStyle(obj,"marginBottom");if(dMB=="auto")dMB=0; // 获取元素margin-bottom
    var dZ=getDefaultStyle(obj,"zIndex"); //获取元素z轴索引(依需求可选)
    obj.onmouseover=function(){ // 鼠标移入
        this.style.position="relative"; // 设置相对定位,z轴索引向浏览者偏移
        this.style.zIndex=dZ+1; // 再设置z轴优先(依需求可选)
        this.style.marginRight=-(parseInt(dW*x)-dW)-(parseInt(dP1*x)-dP1)-(parseInt(dP3*x)-dP3)+parseInt(dMR)+"px"; // 根据容器横向缩放,反向margin-right补位
        this.style.marginBottom=-(parseInt(dH*y)-dH)-(parseInt(dP0*y)-dP0)-(parseInt(dP2*y)-dP2)+parseInt(dMB)+"px"; //  根据容器纵向缩放,反向margin-bottom补位
        if(parseInt(this.style.marginBottom))this.style.overflow="hidden"; /*  适应缩小效果 */
        this.style.padding=parseInt(dP0*y)+"px "+parseInt(dP1*x)+"px "+parseInt(dP2*y)+"px "+parseInt(dP3*x)+"px "; // 纵、横向padding缩放
        this.style.width=parseInt(dW*x)+"px"; // 横向缩放
        this.style.height=parseInt(dH*y)+"px"; // 纵向缩放
        this.style.backgroundColor="#f00"; // 设置调试背景
    }
    obj.onmouseout=function(){
        this.style.position="";
        this.style.zIndex="";
        this.style.marginRight="";
        this.style.marginBottom="";
        this.style.padding="";
        this.style.width="";
        this.style.height="";
        this.style.backgroundColor="";
    }
}
zoom("firstly",1.5,1.5);
zoom("secondly",1,1);
zoom("thirdly",0.5,0.5);
</script>


 提示:您可以先修改部分代码再运行
[ 本帖最后由 zbm2001z 于 2008-1-17 02:46 编辑 ]

TOP

楼上代码 IE7 有问题。
www.cssrain.cn

TOP

有点时间,继续优化:
复制内容到剪贴板
代码:
<script type="text/javascript">
function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性
    return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
function zoom(id,x,y){ // 设置缩放函数参数:容器id、横向缩放倍数、纵向缩放倍数(等比例缩放时也可以设定一个参数)
    var obj=document.getElementById(id); // 获取元素对象
    /* 以下实际值计算全部忽略小数,遇小数统一向上或向下取值,避免各浏览器取值方式干扰 */
    var dO=getDefaultStyle(obj,"overflow");
    var dP0=getDefaultStyle(obj,"paddingTop"),dP0=parseInt(dP0),dP0Y=parseInt(dP0*y); // 获取元素各方向padding值、padding缩放值
    var dP1=getDefaultStyle(obj,"paddingRight"),dP1=parseInt(dP1),dP1X=parseInt(dP1*x);
    var dP2=getDefaultStyle(obj,"paddingBottom"),dP2=parseInt(dP2),dP2Y=parseInt(dP2*y);
    var dP3=getDefaultStyle(obj,"paddingLeft"),dP3=parseInt(dP3),dP3X=parseInt(dP3*x);
    var dW=obj.clientWidth-dP1-dP3,dWX=parseInt(dW*x); // 获取元素宽度、缩放宽度
    var dH=obj.clientHeight-dP0-dP2,dHY=parseInt(dH*y); // 获取元素高度、缩放高度
    var dMR=getDefaultStyle(obj,"marginRight");if(dMR=="auto")dMR=0;var pdMR=parseInt(dMR); // 获取元素margin-right数值
    var dMB=getDefaultStyle(obj,"marginBottom");if(dMB=="auto")dMB=0;var pdMB=parseInt(dMB); // 获取元素margin-bottom数值
    var dZ=getDefaultStyle(obj,"zIndex"); //获取元素z轴索引(依需求可选)
    obj.onmouseover=function(){ // 鼠标移入
        if((x<1 || y<1) && dO!="auto" && dO!="hidden")this.style.overflow="auto"; // 适应缩小效果(依需求或可设值为hidden)
        this.style.position="relative"; // 设置相对定位,z轴索引向浏览者偏移
        this.style.zIndex=dZ+1; // 再设置z轴优先(依需求可选)
        this.style.marginRight=-(dWX-dW)-(dP1X-dP1)-(dP3X-dP3)+pdMR+"px"; // 根据容器横向缩放,设置反向margin-right补位
        this.style.marginBottom=-(dHY-dH)-(dP0Y-dP0)-(dP2Y-dP2)+pdMB+"px"; //  根据容器纵向缩放,设置反向margin-bottom补位
        this.style.padding=dP0Y+"px "+dP1X+"px "+dP2Y+"px "+dP3X+"px "; // 设置padding纵、横向缩放
        this.style.width=dWX+"px"; // 设置横向缩放
        this.style.height=dHY+"px"; // 设置纵向缩放
        this.style.backgroundColor="#f00"; // 设置调试背景
    }
    obj.onmouseout=function(){
        this.style.position="";
        this.style.zIndex="";
        this.style.marginRight="";
        this.style.marginBottom="";
        this.style.padding="";
        this.style.width="";
        this.style.height="";
        this.style.backgroundColor="";
    }
}
zoom("firstly",2,1.5);
zoom("secondly",1,1);
zoom("thirdly",0.5,2);
</script>


 提示:您可以先修改部分代码再运行
[ 本帖最后由 zbm2001z 于 2008-1-17 11:42 编辑 ]

TOP

发现BUG ==》FF下

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

TOP

那是在缩小情况下mouseover后,鼠标自然mouseout的行为,好好理解下吧

不只是在FF下,是在所有的浏览器里都会有这种现象,如果没有就真是有BUG了

TOP

大封装:
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")
复制内容到剪贴板
代码:
<script type="text/javascript">
function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性
    return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
function setZoom(obj,x,y,tagName,className){ // 设置执行缩放对象函数
/* 参数:
   1、DOM元素对象或容器id,并根据是否设置了tagName参数来判断是否赋予该容器缩放
   2、横向缩放倍数
   3、纵向缩放倍数
   4、标签名(若设定该参数,获取前设定DOM元素对象或指定ID容器包含的所有该标签元素子集,并根据是否设置了className参数来判断是否赋予这些元素缩放)
   5、样式名(若设定该参数,获取前设定标签子集元素中包含该样式的元素集合,并赋予它们缩放)
*/
    if(typeof(obj)!="object"){var obj=document.getElementById(obj);}
    if(tagName){
        if(obj.all && !window.opera){
            if(tagName=="*"){
                var tags=obj.all;
            }else{
                var tags=obj.all.tags(tagName);
            }
        }else{
            var tags=obj.getElementsByTagName(tagName);
        };
        if(className){
            for(var i=0;i<tags.length;i++){
                if(RegExp("( ?|^)"+className+"\\b").test(tags[i].className)){
                    zoom(tags[i],x,y);
                }
            }
        }else{
            for(var i=0;i<tags.length;i++){
                zoom(tags[i],x,y);
            }
        };
    }else if(obj!=document){
        zoom(obj,x,y);
    }
}
function zoom(obj,x,y){ // 设置缩放函数参数:容器id、横向缩放倍数、纵向缩放倍数
    /*var obj=document.getElementById(id); // 获取元素对象*/
    // 以下实际值计算全部忽略小数,遇小数统一向上或向下取值,避免各浏览器取值方式干扰
    var dO=getDefaultStyle(obj,"overflow");
    var dP0=getDefaultStyle(obj,"paddingTop"),dP0=parseInt(dP0),dP0Y=parseInt(dP0*y); // 获取元素各方向padding值、padding缩放值
    var dP1=getDefaultStyle(obj,"paddingRight"),dP1=parseInt(dP1),dP1X=parseInt(dP1*x);
    var dP2=getDefaultStyle(obj,"paddingBottom"),dP2=parseInt(dP2),dP2Y=parseInt(dP2*y);
    var dP3=getDefaultStyle(obj,"paddingLeft"),dP3=parseInt(dP3),dP3X=parseInt(dP3*x);
    var dW=obj.clientWidth-dP1-dP3,dWX=parseInt(dW*x); // 获取元素宽度、缩放宽度
    var dH=obj.clientHeight-dP0-dP2,dHY=parseInt(dH*y); // 获取元素高度、缩放高度
    var dMR=getDefaultStyle(obj,"marginRight");if(dMR=="auto")dMR=0;var pdMR=parseInt(dMR); // 获取元素margin-right数值
    var dMB=getDefaultStyle(obj,"marginBottom");if(dMB=="auto")dMB=0;var pdMB=parseInt(dMB); // 获取元素margin-bottom数值
    var dZ=getDefaultStyle(obj,"zIndex"); //获取元素z轴索引(依需求可选)
    obj.onmouseover=function(){ // 鼠标移入
        if((x<1 || y<1) && dO!="auto" && dO!="hidden")this.style.overflow="auto"; // 适应缩小效果(依需求或可设值为hidden)
        this.style.position="relative"; // 设置相对定位,z轴索引向浏览者偏移
        this.style.zIndex=dZ+1; // 再设置z轴优先(依需求可选)
        this.style.marginRight=-(dWX-dW)-(dP1X-dP1)-(dP3X-dP3)+pdMR+"px"; // 根据容器横向缩放,设置反向margin-right补位
        this.style.marginBottom=-(dHY-dH)-(dP0Y-dP0)-(dP2Y-dP2)+pdMB+"px"; //  根据容器纵向缩放,设置反向margin-bottom补位
        this.style.padding=dP0Y+"px "+dP1X+"px "+dP2Y+"px "+dP3X+"px "; // 设置padding纵、横向缩放
        this.style.width=dWX+"px"; // 设置横向缩放
        this.style.height=dHY+"px"; // 设置纵向缩放
        this.style.backgroundColor="#f00"; // 设置调试背景
    }
    obj.onmouseout=function(){
        this.style.position="";
        this.style.zIndex="";
        this.style.marginRight="";
        this.style.marginBottom="";
        this.style.padding="";
        this.style.width="";
        this.style.height="";
        this.style.backgroundColor="";
    }
}
setZoom(document,1.5,1.5,"div","zoom");
</script>


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

TOP

我喜欢用样式的相对单位来做缩放,而不是用JS做过程。

PS:我要上诉,状告宝儿QJ样式表!

TOP

那好,用样式表:

 提示:您可以先修改部分代码再运行
[ 本帖最后由 zbm2001z 于 2008-1-17 17:15 编辑 ]

TOP

回复 #24 fkueaps 的帖子

考虑到IE7以下版本对伪类的不支持,这种效果用JS做应该是正确的..
博客又挂了
Never give up hope
经典站长联盟QQ群:16719484 PHPERQQ群:85363040

TOP

这么早就有人在写攻略了啊,别的试题也欢迎大家写,我们回头公布答案,哈哈

TOP

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

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

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

TOP

这个第二道JS的题,出得很高深啊。
alldone.cn

TOP

不错,题目很有特色~~~

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

TOP