位置：首页>> 网络编程>> 网页设计>> 浅析阿里巴巴前端招聘考题（2）

浅析阿里巴巴前端招聘考题（2）

作者：zbm2001z　来源：蓝色理想　发布时间：2008-01-19 09:52:00　

标签：阿里巴巴,招聘,css,javascript,布局

考题还没完，继续下一题：

2.用javascript优化布局。

由于我们的用户群喜欢放大看页面;于是我们给上一题的布局做一次优化。

当鼠标略过某个区块的时候，该区块会放大25％，并且其他的区块仍然固定不动。

提示：

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

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

关键字：javascript、封装、复用

由于该题要求缩放元素不能对其它元素的位置产生影响，第一感觉就是绝对定位布局，闲话少说，先来布局：

<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>

<!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>绝对定位布局、放大1</title><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></head><body><div id="firstly"> <h2>#firstly</h2> top:10px;<br /> left:10px;<br /> width:200px;<br /> height:200px;<br /></div><div id="secondly"> <h2>#thirdly</h2> top:220px;<br /> left:10px;<br /> width:200px;<br /> height:200px;<br /></div><div id="thirdly"> <h2>#secondly</h2> top:10px;<br /> left:220px;<br /> width:400px;<br /> height:420px;<br /></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></body></html>

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

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

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

<!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>绝对定位布局、放大1</title><style type="text/css">div{position:absolute;background:#ccc;}h2{margin:0;}#firstly{top:10px;left:10px;padding:10px;width:180px;height:180px;}#secondly{top:220px;left:10px;padding:10px;width:180px;height:180px;}#thirdly{top:10px;left:220px;padding:10px;width:380px;height:390px;}</style></head><body><div id="firstly"> <h2>#firstly</h2> top:10px;<br /> left:10px;<br /> padding:10px;<br /> width:200px;<br /> height:200px;<br /></div><div id="secondly"> <h2>#secondly</h2> top:220px;<br /> left:10px;<br /> padding:10px;<br /> width:180px;<br /> height:180px;<br /></div><div id="thirdly"> <h2>#thirdly</h2> top:10px;<br /> left:220px;<br /> padding:10px;<br /> width:380px;<br /> height:390px;<br /></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,1);zoom("secondly",1,1);zoom("thirdly",1,1);</script></body></html>

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 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>

第一页上一页 1

3 下一页

投稿

浅析阿里巴巴前端招聘考题（2）

猜你喜欢