使用JavaScript实现商品放大镜效果
版权申诉
62 浏览量
更新于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
- 粉丝: 4797
- 资源: 1万+
我的内容管理
展开
最新资源
- C语言数组操作：高度检查器编程实践
- 基于Swift开发的嘉定单车LBS iOS应用项目解析
- 钗头凤声乐表演的二度创作分析报告
- 分布式数据库特训营全套教程资料
- JavaScript开发者Robert Bindar的博客平台
- MATLAB投影寻踪代码教程及文件解压缩指南
- HTML5拖放实现的RPSLS游戏教程
- HT://Dig引擎接口，Ampoliros开源模块应用
- 全面探测服务器性能与PHP环境的iprober PHP探针v0.024
- 新版提醒应用v2：基于MongoDB的数据存储
- 《我的世界》东方大陆1.12.2材质包深度体验
- Hypercore Promisifier: JavaScript中的回调转换为Promise包装器
- 探索开源项目Artifice：Slyme脚本与技巧游戏
- Matlab机器人学习代码解析与笔记分享
- 查尔默斯大学计算物理作业HP2解析
- GitHub问题管理新工具：GIRA-crx插件介绍
