51cto上看到的一个前端面试题（http://developer.51cto.com/art/201206/345184.htm）
要实现的效果：
里面的要求是用js，顺便也加了css的实现。最关键的呢，就是z-index.
<head>
<style>
body{ margin:0; padding:0}
div{background:#CCCCCC; position:absolute}
#first{width:100px; height:150px}
#second{top:160px;width:100px;height:150px}
#third{ width:200px; height:310px; left:110px}
#first:hover{width: 125px; height: 190px; background: green; z-index: 1}
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</body>
<script>
function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）
var obj=document.getElementById(id); // 获取元素对象值
var dW=obj.clientWidth; // 获取元素宽度
var dH=obj.clientHeight; // 获取元素高度
//var oTop=obj.offsetTop;
//var oLeft=obj.offsetLeft;
obj.onmouseover=function(){ // 鼠标移入
this.style.width=dW*x+"px"; // 横向缩放
this.style.height=dH*y+"px"; // 纵向缩放
this.style.backgroundColor="green"; //设置调试背景
this.style.zIndex=1; // 设置z轴优先
}
obj.onmouseout=function(){ // 鼠标移出，设回默认值
this.style.width="";
this.style.height="";
this.style.padding="";
this.style.backgroundColor="";
this.style.zIndex="";
}
}
//zoom("first",1.25,1.25);
zoom("second",1.25,1.25);
zoom("third",1.25,1.25);
</script>
分享到：
相关推荐
采用区块复用加载，优化内存占用，有效避免OOM， 注意：支持网络图片、本地图片。 更新日志 v0.0.5新增：可设置缩放比例、缩放动画时间。 v1.2.0新增：可设置多种加载策略（仅普清、仅原图、手动模式、网络自适应）...
仪表放大器是具有差分输入和单端输出的死循环增益电路区块。仪表放大器一般还有一 个基准输入端，以便让使用者可以对输出电压进行上或下的位准移位（level-shift） 。使用 者还可以一个或多个的内部或外部电阻来设定...
一个图片浏览器，支持超大图、超长图、支持手势放大、支持查看原图、下载、加载百分比进度显示。采用区块复用加载，优化内存占用，有效避免OOM。 截图 功能 支持多张图片（网络图片）滑动浏览，支持手势放大、双击...
采用区块复用加载，优化内存占用，有效避免OOM。支持手势下拉退出。注意：本框架支持网络图片、本地图片、支持gif动图、支持Android 11。后续可能会仅维护androidx版本，support请尽快迁移到androidx。参考官方迁移...
3.点击下部的放大镜按钮能展开局部放大框，进行100倍、200倍、300倍等局部放大效果展示，从而更好地取每一个细小地方的颜色值。 4.直接点击面板区块的颜色代码就能直接把颜色值复制到剪贴板直接供我们粘贴使用。 ...
运用对原始数据进行解析控制插值算法的精度和视窗的消隐与裁剪等技术,实现了三维要素的多角度观察、放大、漫游、旋转、平移、叠加、剥离、透明和纹理处理等可视化功能。系统在晋城矿区寺河区块进行实际应用,取得了...
淘宝高级模板源码，20区块具体详细，头部、海报、全屏商品区、950视频、950商品区，特色：全屏海报区可内置不同节日风格背景， 全屏商品区，可设置不同分辨率，设置不同列数展示方式；商品区十几种鼠标悬浮蒙版效果...
煤层气藏具有低渗透率特点,这使得其在直井排采前须对产层进行压裂改造,而压裂裂缝...以我国韩城矿区煤层气区块储层参数为例,在给定优化指标下,宜选择矩形井网(350 m×300 m),或菱形井网(对角线长度为700 m×400 m)。
3.模板均采用标准CSS+DIY制作，全模块化设计，所有内容数据均可通过前台修改设置，区块可任意前台拖动及删除无需修改模板文件; 4.模板采用多配色方案，一套模板多种颜色随意切换（默认青色）其他配色请查看扩展组件...
最重要的是他具有一般文书编辑软件所没有的「行列功能」，可以进行区块模式选取的编辑。绝对是程序设计师的好帮手。 1 自定义语法高亮，支持HTML, XML, CSS, JavaScript, VBScript, ASP, PHP, CSS, Perl/CGI,C/...
最重要的是他具有一般文书编辑软件所没有的「行列功能」，可以进行区块模式选取的编辑。绝对是程序设计师的好帮手。 这是一个很不错的记事本。 【软件特色】 1 自定义语法高亮，支持HTML, XML, CSS, JavaScript, ...
AKM 公司的AK5373是带USB 2.0接口的立体声模数转换器（ADC），包括有USB串行接口引擎，USB收发器，音频处理区块，端点以及24位立体声音频ADC。集成的PLL可使用多种取样频率，并集成了麦克风放大器和可编程增益放大器...
最重要的是他具有一般文书编辑软件所没有的「行列功能」，可以进行区块模式选取的编辑。绝对是程序设计师的好帮手。 这是一个很不错的记事本。 【软件特色】 1 自定义语法高亮，支持HTML, XML, CSS, JavaScript, ...
Maxim 公司的MAX8784是TV和监视器的TFT-LCD电源解决方案，包括升压稳压器，调整的正和负电荷泵，三个大电流运输放大器，以及双模式逻辑控制高压开关控制区块。输入电压4V-5.5V。效率高达90%，开关频率1.2MHz，主要用...
针对大庆外围扶杨油层为特低渗透、低流度和低产的油层，在注水开发条件下无法有效动用问题，以树101区块为对象，采用油气藏工程与数值模拟相结合的方法，应用混相体积系数、结合波及系数和换油率等注气开发参数，...
Maxim 公司的MAX8784是TV和监视器的TFT-LCD电源解决方案，包括升压稳压器，调整的正和负电荷泵，三个大电流运输放大器，以及双模式逻辑控制高压开关控制区块。输入电压4V-5.5V。效率高达90%，开关频率1.2MHz，主要用...
讲座：星期二和星期四，太平洋时间10：30-12：00， （pwd：4242） 实验室：星期四，太平洋标准时间2-4，放大评估这是一门基于作业的课程。 您将得到如下评估： 评估重量截止日期地点实验室作业1 25％ 2月27日，晚上...
影像首先被分割成7块或6个区域（两个区域是重复的），每个区域都可以独立加权计 算曝光等级，例如中间部分就可以加到其余区块的9倍，因此一个在画面中间位置的目标 可以被看得非常清晰， 因为曝光主要是参照中间区域...
向前滚动图形放大，向后滚动图形缩小，按下滚轮图形平移。 3、格式刷功能。点、线、区都可以运用格式刷进行修改和编辑。 4、查询图元功能。自动查找文本、属性、子图、颜色等。 5、参数拾取功能。拾取点、线、区...