浅析阿里巴巴前端招聘考题（3）
作者：zbm2001z 来源：蓝色理想 发布时间：2008-01-19 09:52:00
标签：阿里巴巴,招聘,css,javascript,布局
让我们回到流体布局吧——完美主义者！
完美主义者的理想，完善的流体布局缩放：
<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>
大封装：
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>
下面，用样式表实现：
0
投稿猜你喜欢
- 本文实例讲述了Python中super函数用法。分享给大家供大家参考，具体如下：这是个高大上的函数,在python装13手册里面介绍过多使用
- 定义一个变量，直接输出会输出变量的属性，并不能输出变量值。那么怎么输出变量值呢？请看下面得意import tensorflow as tf
爬取”顶点小说网“《纯阳剑尊》代码import requestsfrom bs4 import BeautifulSoup# 反爬heade- 导语“超级玛丽”——有多少人还记得这款经典游戏？那个戴帽子的大胡子穿着背带裤的马里奥！带您重温经典的回忆，超级马里奥拯救不开心！炫酷来袭。如
- 前言extends关键字在TS编程中出现的频率挺高的，而且不同场景下代表的含义不一样，特此总结一下：表示继承/拓展的含义表示约束的含义表示分
- 1、跳过迭代对象的开头string_from_file = """ // Wooden: ...
- 字符串 -- 不可改变的序列如同大多数高级编程语言一样，变长字符串是 Python 中的基本类型。Python 在“后台”分配内存以保存字符
- vue控制mock在开发环境使用,在生产环境禁用说下原因mock拦截所有的axios请求，根据请求，做出相应的响应。平时前后端分离开发，我们
- 1、Mysql errono 1005 : 主外键不是完全一致 , 请检查如下几点: a、字段是否存在 b、类型是否一致(注意unsigne
- 由于pytorch的whl 安装包名字都一样，所以我们很难区分到底是基于cuda 的哪个版本。有一条指令可以查看import torchpr
- 本文实例讲述了Python实现的本地文件搜索功能。分享给大家供大家参考，具体如下：偶尔需要搜索指定文件，不想每次都在windows下面去搜索
- sklearn的cross_validation包中含有将数据集按照一定的比例，随机划分为训练集和测试集的函数train_test_spli
- 正在看的ORACLE教程是:ORACLE常见错误代码的分析与解决（二）。
- 元素的CSS样式，除了包括内联的（即通过style属性加上的）样式定义外，还有页面嵌入的css和外部引入的css两种方式。但在JS中通过el
- 1.Apache2.2\conf\httpd.conf中释放： Include conf/extra/httpd-vhosts.conf（去
- 作者：丁仪来源：https://chengxuzhixin.com/blog/post/mysql_zhong_yao_ri_zhi_wen
- 相对C/C++ 而言，我们所用的JavaScript 在内存这一方面的处理已经让我们在开发中更注重业务逻辑的编写。但是随着业务的不断复杂化，
- 本文实例介绍了如何使用ASP代码来读写注册表，呵呵厉害吧！ 一个例子: <％Dim ReadComputerNam
- 在学习linear regression时经常处理的数据一般多是矩阵或者n维向量的数据形式，所以必须对矩阵有一定的认识基础。numpy中创建
- 1、将python打包好的exe解压为py文件，步骤如下： 下载pyinstxtractor.py文件2、下载地址：https://nchc
