原生js放大镜效果代码
原生JavaScript放大镜效果是一种常见的网页交互效果，它允许用户通过鼠标悬停在图片上时，显示一个放大的视图。以下是实现这一效果的基础概念、优势、类型、应用场景以及示例代码。
基础概念
放大镜效果通常涉及以下几个关键点：
- 遮罩层（Mask）：用于显示放大后的图像区域。
- 放大镜容器（Magnifier Container）：包含放大后的图像。
- 鼠标跟踪：实时跟踪鼠标在原始图像上的位置，并相应地更新放大镜中的视图。
优势
- 增强用户体验：提供更直观的图像查看方式。
- 无需额外插件：完全依赖原生JavaScript和CSS实现。
- 灵活性高：可以根据需求自定义放大倍数、遮罩形状等。
类型
- 圆形遮罩：放大镜区域为圆形。
- 矩形遮罩：放大镜区域为矩形。
- 自定义形状遮罩：可以使用CSS创建任意形状的遮罩。
应用场景
- 电商网站：展示商品细节。
- 图片库：方便用户查看高清图片。
- 艺术作品展示：提供更精细的艺术品细节。
示例代码
以下是一个简单的原生JavaScript放大镜效果实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Magnifier Effect</title>
<style>
.magnifier-container {
position: relative;
display: inline-block;
}
.magnifier-lens {
position: absolute;
border: 2px solid #000;
width: 100px;
height: 100px;
background-color: rgba(255, 255, 255, 0.5);
pointer-events: none;
display: none;
}
.magnifier-result {
position: absolute;
top: 0;
right: -120px; /* Adjust as needed */
width: 200px;
height: 200px;
border: 1px solid #000;
overflow: hidden;
display: none;
}
.magnifier-result img {
position: absolute;
width: auto;
height: auto;
}
</style>
</head>
<body>
<div class="magnifier-container">
<img src="your-image.jpg" alt="Image" id="magnifier-image">
<div class="magnifier-lens" id="magnifier-lens"></div>
<div class="magnifier-result" id="magnifier-result">
<img src="your-image.jpg" alt="Magnified Image" id="magnifier-result-img">
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const image = document.getElementById('magnifier-image');
const lens = document.getElementById('magnifier-lens');
const result = document.getElementById('magnifier-result');
const resultImg = document.getElementById('magnifier-result-img');
const cx = result.offsetWidth / lens.offsetWidth;
const cy = result.offsetHeight / lens.offsetHeight;
image.addEventListener('mousemove', moveLens);
lens.addEventListener('mousemove', moveLens);
function moveLens(e) {
e.preventDefault();
const pos = getCursorPos(e);
let x = pos.x - (lens.offsetWidth / 2);
let y = pos.y - (lens.offsetHeight / 2);
if (x > image.width - lens.offsetWidth) { x = image.width - lens.offsetWidth; }
if (x < 0) { x = 0; }
if (y > image.height - lens.offsetHeight) { y = image.height - lens.offsetHeight; }
if (y < 0) { y = 0; }
lens.style.left = x + 'px';
lens.style.top = y + 'px';
resultImg.style.left = -x * cx + 'px';
resultImg.style.top = -y * cy + 'px';
}
function getCursorPos(e) {
let a, x = 0, y = 0;
e = e || window.event;
a = image.getBoundingClientRect();
x = e.pageX - a.left;
y = e.pageY - a.top;
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x: x, y: y};
}
image.addEventListener('mouseenter', () => {
lens.style.display = 'block';
result.style.display = 'block';
});
image.addEventListener('mouseleave', () => {
lens.style.display = 'none';
result.style.display = 'none';
});
});
</script>
</body>
</html>解释
- HTML结构：包含原始图像、遮罩层和放大结果显示区域。
- CSS样式：定义了各个元素的布局和外观。
- JavaScript逻辑：
- 监听鼠标移动事件，计算并更新遮罩层和放大镜中的图像位置。
- 使用
getCursorPos函数获取鼠标在图像上的精确位置。 - 根据鼠标位置调整放大镜和放大结果显示区域的位置。
通过这种方式，可以实现一个简单而有效的放大镜效果，提升用户的交互体验。
相关·内容
云+社区沙龙online [新技术实践]
Serverless 一站式云原生应用开发实践
微搭低代码直播互动专栏
「低代码·用微搭」第一期： 微搭企业应用搭建能力详解
微搭低代码系列直播课
「低代码·用微搭」第二期： 微搭低代码产品全景介绍
微搭低代码直播互动专栏
「低代码·用微搭」第三期： 微搭低代码编辑器全解
微搭低代码直播互动专栏
「低代码·用微搭」第四期： 微信生态中的微搭力量
微搭低代码直播互动专栏
「低代码·用微搭」第五期： 解码微搭低代码数据源能力
微搭低代码直播互动专栏
「低代码·用微搭」第六期：微搭实战-快速搭建餐饮预约小程序
双11音视频系列直播
IM 全新推出小程序 TUIKit 及跨平台利器uniapp版场景化解决方案
Tencent Serverless Hours 第15期
云函数 Web Function 落地应用实践—大咖分享
云+社区沙龙online [国产数据库]
腾讯云CDB/CynosDB技术揭秘（上）：云原生、海量运营
云+社区沙龙online [国产数据库]
腾讯云CDB/CynosDB技术揭秘（下）自主可控、前沿探索
ServerlessDays · China Online
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
