JavaScript实现商品放大镜效果
本文实例为大家分享了JavaScript实现商品放大镜的具体代码，供大家参考，具体内容如下 HTML+CSS部分： <style> .small{ position: relative; width: 400px; height: 450px; border: 1px solid #ccc; } .small img{ width: 100%;
### JavaScript 实现商品放大镜效果
#### 知识点概览
1. **HTML 结构设计**：构建页面布局及元素。
2. **CSS 样式设置**：定义样式及响应用户交互时的视觉变化。
3. **JavaScript 事件监听与处理**：实现鼠标移动时的动态效果。
#### HTML 结构
```html
<div class="small">
<img src="./img/small.jpg">
<div class="mask"></div>
</div>
<div class="big">
<img src="./img/big.jpg">
</div>
```
- **`.small`**：表示显示较小的商品图片的容器，内含商品图片和一个遮罩层。
- **`.mask`**：用于跟踪鼠标位置并控制放大区域的显示。
- **`.big`**：展示放大的商品图片的容器。
#### CSS 样式
```css
.small {
position: relative;
width: 400px;
height: 450px;
border: 1px solid #ccc;
}
.small img {
width: 100%;
height: 100%;
}
.small .mask {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 300px;
background-color: rgba(0, 255, 0, 0.2);
}
.big {
position: absolute;
left: 450px;
top: 8px;
width: 550px;
height: 550px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.big img {
position: absolute;
left: 0;
top: 0;
}
```
- **`.small`** 和 **`.big`** 定位为相对定位，使内部元素能够相对于它们的位置进行绝对定位。
- **`.small .mask`** 的背景色使用透明度较低的绿色（`rgba(0, 255, 0, 0.2)`），使得用户可以清楚地看到遮罩下的图片。
- **`.big`** 默认隐藏（`display: none`），并在鼠标进入 `.small` 区域时显示。
#### JavaScript 实现
```javascript
var small = document.querySelector('.small');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
var bigImg = document.querySelector('.big > img');
// 拿到大图的宽高
var bigWidth = bigImg.offsetWidth;
var bigHeight = bigImg.offsetHeight;
function move(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// 移动遮罩位置
var maskHeight = mask.offsetHeight / 2;
var maskWidth = mask.offsetWidth / 2;
mask.style.left = x - maskWidth + 'px';
mask.style.top = y - maskHeight + 'px';
// 限制遮罩的移动范围
var maxLeft = small.offsetWidth - mask.offsetWidth;
if (mask.offsetTop < 0) {
mask.style.top = 0;
}
if (mask.offsetLeft > maxLeft) {
mask.style.left = maxLeft + 'px';
}
if (mask.offsetLeft < 0) {
mask.style.left = 0;
}
if (mask.offsetTop > small.offsetHeight - mask.offsetHeight) {
mask.style.top = small.offsetHeight - mask.offsetHeight + 'px';
}
// 计算大图的移动位置
bigImg.style.left = -mask.offsetLeft * (bigImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth) + "px";
bigImg.style.top = -mask.offsetTop * (bigImg.offsetHeight - big.offsetHeight) / (small.offsetHeight - mask.offsetHeight) + "px";
}
// 小图上移动遮罩
small.addEventListener('mousemove', move);
```
- **获取DOM元素**：通过 `document.querySelector` 获取各个需要操作的DOM元素。
- **计算大图移动位置**：根据鼠标在 `.small` 内部的位置来计算 `.big img` 应该移动的位置，保持两者的相对位置一致。
- **事件监听**：为 `.small` 添加 `mousemove` 事件监听器，实时更新遮罩和大图的位置。
#### 总结
本例通过 HTML、CSS 和 JavaScript 的结合，实现了商品放大镜的效果。用户可以在 `.small` 区域内移动鼠标来查看商品细节，同时 `.big` 中展示放大后的图像。此实现不仅增强了用户体验，还为电商网站提供了实用的功能。开发者可以根据实际需求调整样式和逻辑，以适应不同的应用场景。
