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>
分享到：
相关推荐
问题要求当鼠标悬停在某个区块上时，该区块放大25%，其他区块保持不变。我们可以使用JavaScript的事件监听来实现这个功能，同时考虑代码的封装和复用。 1. 首先，将原始布局的样式改为绝对定位，方便进行动态调整。...
### SSD写入放大详解 #### 一、SSD写入放大的概念与原理 SSD（固态硬盘）因其高速读写性能而被广泛应用。然而，在实际使用过程中，用户可能会遇到一个现象：SSD的实际写入量远大于操作系统报告的写入量。这种现象...
它允许用户展开或折叠内容区块，以节省页面空间。在JavaScript中，可以通过监听点击事件，改变元素的显示状态（如高度变化）来实现这一效果。jQuery库提供了便捷的方法，如`.slideToggle()`，可以轻松创建手风琴效果...
采用区块复用加载，优化内存占用，有效避免OOM， 注意：支持网络图片、本地图片。 更新日志 v0.0.5新增：可设置缩放比例、缩放动画时间。 v1.2.0新增：可设置多种加载策略（仅普清、仅原图、手动模式、网络自适应）...
SVG的优势在于其图形是矢量的，无论放大多少倍都能保持清晰，非常适合用于图表制作。 在创建环形统计图时，我们需要以下几个关键步骤： 1. **HTML结构**：首先，创建一个SVG元素作为图形容器，设置其宽度、高度和...
垃圾回收是SSD内部为了保持数据一致性而进行的数据迁移过程，当一个区块被标记为已删除时，SSD需要找到新的空闲区块来存放后续写入的数据，这个过程就会产生额外的写操作。TRIM指令是操作系统用来告诉SSD哪些数据块...
- **主容器**：`<div class="box tshop-pbsm tshop-pbsm-ssd10c" data-spm="...">`，该类名表明这是一个特定的商品展示区块。 - **自定义区域**：`<div class="custom-area">`，用于存放自定义内容。 - **具体...
这种特效使得用户可以通过简单的手势（如鼠标悬停或点击）来切换不同的内容区块，增加了交互性和视觉趣味性。 滑动门效果通常是基于CSS3和JavaScript实现的，CSS3负责元素的布局和基本样式，而JavaScript则处理动态...
点击按钮时，元素可以放大或旋转，增加互动性。这些动画效果不仅能够吸引用户注意力，还能增强页面的视觉吸引力。 在CSS框架样式方面，该插件可能包含了预设的样式规则，如颜色方案、字体设置、边距和填充等，这些...
这些效果可以包括淡入淡出、滑动、旋转、放大缩小等，旨在吸引用户的注意力并提升页面的视觉吸引力。 四、jQuery页面滚动触发机制 jQuery提供了`$(window).scroll()`函数，用于监听页面滚动事件。当用户滚动页面时...
此外，AD8222的差分驱动功能使得它能够与高性能的差分输入ADC如ADI的AD7661、AD7675、AD7680和AD7940等完美搭配，增强了系统的灵活性，并通过单电源或信号调理区块进一步优化噪声性能。 AD8222的转换速率达到了2V/...
一个图片浏览器，支持超大图、超长图、支持手势放大、支持查看原图、下载、加载百分比进度显示。采用区块复用加载，优化内存占用，有效避免OOM。 截图 功能 支持多张图片（网络图片）滑动浏览，支持手势放大、双击...
采用区块复用加载，优化内存占用，有效避免OOM。支持手势下拉退出。注意：本框架支持网络图片、本地图片、支持gif动图、支持Android 11。后续可能会仅维护androidx版本，support请尽快迁移到androidx。参考官方迁移...
- 数据手册通常会包含一个功能区块图，显示了运算放大器内部的主要组件和工作原理，包括输入级、中间级、输出级和补偿电路等。 5. 设计注意事项： - 这些运算放大器在安全关键应用中的使用需要谨慎，因为数据手册...
除了上述的功能外，Excelente主题还支持自定义静态区块，这些区块可以在不同的页面上重复使用。例如： - **首页静态区块**：包括`homepage_block_above_grid`、`homepage_block_below_grid`等。 - **页头静态区块**...
3.点击下部的放大镜按钮能展开局部放大框，进行100倍、200倍、300倍等局部放大效果展示，从而更好地取每一个细小地方的颜色值。 4.直接点击面板区块的颜色代码就能直接把颜色值复制到剪贴板直接供我们粘贴使用。 ...
TA7640内部包含了多个功能区块，如射频振荡器、混频器、放大器等，能有效地解调射频信号，将其中的音频信息提取出来。输出端如MOD IN、REAC OUT等连接到后续的音频处理电路，如MIC AMP IN和MIC AMP OUT，进一步放大...
电路图中，可以看到该芯片包含多个功能区块，如输入级、增益控制、电源管理以及输出级。输入级通常采用差分放大器结构，目的是提高信噪比并减少外部噪声干扰。增益控制部分则允许用户根据需求调整放大倍数，以适应...