使用JavaScript实现商品放大镜效果
版权申诉
91 浏览量
更新于2024-08-20
收藏 17KB DOCX 举报
"JavaScript实现商品放大镜效果"
在电商网站或者产品展示页面中，商品放大镜功能是一个常见的交互设计，它允许用户通过鼠标悬停在商品小图上时看到一个放大的局部视图，从而更好地观察商品细节。本文将详细介绍如何使用JavaScript配合HTML和CSS来实现这一效果。
首先，我们需要创建HTML结构，包括一个包含小图的`.small`容器，一个作为放大镜遮罩的`.mask`元素，以及一个用来显示放大效果的大图`.big`容器。HTML代码如下：
```html
<body>
<div class="small">
<img src="./img/small.jpg">
<div class="mask"></div>
</div>
<div class="big">
<img src="./img/big.jpg">
</div>
</body>
```
接着是CSS样式设置。`.small`设置了相对定位，并设置了宽度和高度，以及边框。`.small img`是小图，填充整个`.small`区域。`.mask`作为放大镜的遮罩层，绝对定位在`.small`内，并设置了背景透明度。`.big`是放大部分，隐藏显示，绝对定位在页面右侧，包含大图。
```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, .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;
}
```
接下来，我们使用JavaScript来处理鼠标移动事件。当鼠标在小图上移动时，计算放大镜的位置并更新大图的显示区域。以下是一部分JS代码：
```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 maskX = x - (mask.offsetWidth / 2);
var maskY = y - (mask.offsetHeight / 2);
// 确保遮罩在小图范围内
if (maskX < 0) {
maskX = 0;
} else if (maskX > small.offsetWidth - mask.offsetWidth) {
maskX = small.offsetWidth - mask.offsetWidth;
}
if (maskY < 0) {
maskY = 0;
} else if (maskY > small.offsetHeight - mask.offsetHeight) {
maskY = small.offsetHeight - mask.offsetHeight;
}
// 更新遮罩位置
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 计算大图显示的坐标
var bigX = maskX / (small.offsetWidth - mask.offsetWidth) * (bigWidth - small.offsetWidth);
var bigY = maskY / (small.offsetHeight - mask.offsetHeight) * (bigHeight - small.offsetHeight);
// 更新大图显示区域
big.style.display = 'block';
bigImg.style.left = '-' + bigX + 'px';
bigImg.style.top = '-' + bigY + 'px';
}
// 添加事件监听器
small.addEventListener('mousemove', move);
```
这段JavaScript代码中，`move`函数计算了鼠标相对于`.small`容器的位置，然后根据这个位置调整遮罩层`.mask`的位置。同时，根据遮罩在小图中的位置，计算出大图应该显示的区域，并更新大图容器`.big`内的图片位置。最后，为`.small`添加鼠标移动事件监听器，使得鼠标移动时放大镜效果能实时更新。
通过以上步骤，我们就实现了JavaScript商品放大镜效果。用户在小图上移动鼠标时，可以看到一个透明的遮罩层跟随鼠标移动，同时右侧的大图会显示对应的放大区域，提供更清晰的商品细节视图。
2021-12-29 上传
2021-12-29 上传
2021-12-29 上传
2023-06-10 上传
2023-02-24 上传
2023-06-26 上传
2023-08-25 上传
2023-06-22 上传
2023-05-31 上传
mmoo_python
- 粉丝: 1463
- 资源: 1万+
我的内容管理
展开
最新资源
- 社交媒体营销激励优化策略研究
- 终端信息查看工具：qt框架下的输出强制抓取
- MinGW Win32 C/C++ 开发环境压缩包快速入门指南
- STC8G1K08 PWM模块实现10K频率及易改占空比波形输出
- MSP432电机驱动编码器测路程方法解析
- 实现动静分离案例的css/js/img文件指南
- 爱心代码五种：高效编程的精选技巧
- MATLAB实现广义互相关时延估计GCC的多种加权方法
- Hive CDH Jar包下载：免费获取Hive JDBC驱动
- STC8G单片机实现EEPROM及MODBUS-RTU协议
- Java集合框架面试题精讲
- Unity游戏设计与开发资源全集
- 探索音乐盒.zip背后的神秘世界
- Matlab自相干算法GUI界面设计及仿真
- STM32智能小车PID算法实现资料
- Python爬虫实战：高效爬取百度贴吧信息
