下面我将详细讲解“原生js实现一个放大镜效果超详细”的完整攻略,包括具体步骤和示例说明。
1. 确定实现功能
首先要明确要实现的功能,即在鼠标移动到图片区域的某个位置时,显示该位置的放大图像,这里需要实现以下功能:
- 鼠标移动到图片区域时,获取鼠标位置,并计算放大图像的位置
- 显示放大图像,并确定其位置和大小
- 鼠标移出图片区域时,隐藏放大图像
2. HTML和CSS布局
创建一个HTML元素作为放大镜,用CSS设置其样式和位置,然后把图片作为背景图设置在另一个HTML元素上。
<div id="img-container">
<div id="zoom"></div>
<div id="img" style="background-image: url(img.jpg)"></div>
</div>
#img-container {
position: relative;
width: 500px;
height: 500px;
}
#img {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#zoom {
position: absolute;
width: 150px;
height: 150px;
border: 2px solid #eee;
display: none;
/* 隐藏放大镜 */
background-color: rgba(0, 0, 0, 0.2);
/* 设置放大镜背景色,透明度为0.2 */
background-repeat: no-repeat;
}
3. JS实现放大效果
3.1 获取鼠标位置
监听图片容器的mousemove事件,获取鼠标相对于容器左上角的坐标位置。由于鼠标位置相对于屏幕而言,需要计算鼠标位置与容器位置的偏移量,并将其作为参数传入放大镜的位置计算函数。
const imgContainer = document.getElementById("img-container");
const zoom = document.getElementById("zoom");
const img = document.getElementById("img");
imgContainer.addEventListener("mousemove", e => {
const x = e.pageX - imgContainer.offsetLeft;
const y = e.pageY - imgContainer.offsetTop;
setZoomPosition(x, y);
});
3.2 计算放大图像位置
根据鼠标位置计算放大镜的位置,然后通过对放大效果的大小进行调整,动态设置放大环境中展示的文件位置(计算公式可以根据实际情况进行调整)。
function setZoomPosition(x, y) {
const zoomWidth = zoom.offsetWidth;
const zoomHeight = zoom.offsetHeight;
const imgWidth = img.offsetWidth;
const imgHeight = img.offsetHeight;
const bgWidth =
parseInt(getComputedStyle(img).backgroundSize.split(" ")[0]) || imgWidth;
const bgHeight =
parseInt(getComputedStyle(img).backgroundSize.split(" ")[1]) || imgHeight;
const ratioX = zoomWidth / imgWidth;
const ratioY = zoomHeight / imgHeight;
const bgX = (x / imgWidth) * bgWidth - zoomWidth / 2;
const bgY = (y / imgHeight) * bgHeight - zoomHeight / 2;
const offsetX = x - zoomWidth / 2;
const offsetY = y - zoomHeight / 2;
if (bgX < 0) {
zoom.style.backgroundPositionX = "0";
} else if (bgX > bgWidth - zoomWidth / ratioX) {
zoom.style.backgroundPositionX = bgWidth - zoomWidth / ratioX + "px";
} else {
zoom.style.backgroundPositionX = bgX + "px";
}
if (bgY < 0) {
zoom.style.backgroundPositionY = "0";
} else if (bgY > bgHeight - zoomHeight / ratioY) {
zoom.style.backgroundPositionY = bgHeight - zoomHeight / ratioY + "px";
} else {
zoom.style.backgroundPositionY = bgY + "px";
}
zoom.style.left = offsetX + "px";
zoom.style.top = offsetY + "px";
zoom.style.display = "block";
// 显示放大镜
}
3.3 隐藏放大图像
监听图片容器的mouseleave事件,隐藏放大镜。
imgContainer.addEventListener("mouseleave", () => {
zoom.style.display = "none";
});
4. 示例说明
示例1
此示例演示了使用原生JS实现放大效果的基本步骤。 具体实现步骤如下:
- 创建HTML和CSS元素及样式
- 在JS中获取元素并监听mousemove和mouseleave事件
- 编写计算放大效果位置的函数
- 显示和隐藏放大效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JS放大镜效果示例1</title>
<style>
#img-container {
position: relative;
width: 500px;
height: 500px;
}
#img {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#zoom {
position: absolute;
width: 150px;
height: 150px;
border: 2px solid #eee;
display: none;
/* 隐藏放大镜 */
background-color: rgba(0, 0, 0, 0.2);
/* 设置放大镜背景色,透明度为0.2 */
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="img-container">
<div id="zoom"></div>
<div id="img" style="background-image: url(img1.jpg)"></div>
</div>
<script>
const imgContainer = document.getElementById("img-container");
const zoom = document.getElementById("zoom");
const img = document.getElementById("img");
imgContainer.addEventListener("mousemove", e => {
const x = e.pageX - imgContainer.offsetLeft;
const y = e.pageY - imgContainer.offsetTop;
setZoomPosition(x, y);
});
imgContainer.addEventListener("mouseleave", () => {
zoom.style.display = "none";
});
function setZoomPosition(x, y) {
const zoomWidth = zoom.offsetWidth;
const zoomHeight = zoom.offsetHeight;
const imgWidth = img.offsetWidth;
const imgHeight = img.offsetHeight;
const bgWidth = parseInt(
getComputedStyle(img).backgroundSize.split(" ")[0]
);
const bgHeight = parseInt(
getComputedStyle(img).backgroundSize.split(" ")[1]
);
const ratioX = zoomWidth / imgWidth;
const ratioY = zoomHeight / imgHeight;
const bgX = (x / imgWidth) * bgWidth - zoomWidth / 2;
const bgY = (y / imgHeight) * bgHeight - zoomHeight / 2;
const offsetX = x - zoomWidth / 2;
const offsetY = y - zoomHeight / 2;
if (bgX < 0) {
zoom.style.backgroundPositionX = "0";
} else if (bgX > bgWidth - zoomWidth / ratioX) {
zoom.style.backgroundPositionX =
bgWidth - zoomWidth / ratioX + "px";
} else {
zoom.style.backgroundPositionX = bgX + "px";
}
if (bgY < 0) {
zoom.style.backgroundPositionY = "0";
} else if (bgY > bgHeight - zoomHeight / ratioY) {
zoom.style.backgroundPositionY =
bgHeight - zoomHeight / ratioY + "px";
} else {
zoom.style.backgroundPositionY = bgY + "px";
}
zoom.style.left = offsetX + "px";
zoom.style.top = offsetY + "px";
zoom.style.display = "block";
// 显示放大镜
}
</script>
</body>
</html>
示例2
此示例演示了使用原生JS实现放大效果的优化,使其更加流畅、实用。具体实现步骤如下:
- 创建HTML元素和CSS样式,将放大效果显示在边框内部,增加放大效果为视觉中心,优化用户体验
- 在JS中对计算公式进行优化,使放大效果更加精准,完美呈现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JS放大镜效果示例2</title>
<style>
#img-container {
position: relative;
width: 500px;
height: 500px;
}
#img {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#zoom {
position: absolute;
width: 200px;
height: 200px;
border: 1px dashed #999;
display: none;
/* 隐藏放大镜 */
background-color: rgba(255, 255, 255, 0.5);
/* 设置放大镜背景色,透明度为0.2 */
background-repeat: no-repeat;
background-size: 800% 800%;
/* 放大环境宽度增加700%,显示放大效果在环境中心 */
background-position: -150% -150%;
/* 外部边框宽高为200像素,计算器为总长度为800%,
将放大效果定位,-100%表示左侧对齐,
负数在向左偏移,-200%为上部对齐,-150%为居中 */
border-radius: 50%;
/* 设置边框为圆形 */
}
</style>
</head>
<body>
<div id="img-container">
<div id="zoom"></div>
<div id="img" style="background-image: url(img2.jpg)"></div>
</div>
<script>
const imgContainer = document.getElementById("img-container");
const zoom = document.getElementById("zoom");
const img = document.getElementById("img");
imgContainer.addEventListener("mousemove", e => {
const x = e.pageX - imgContainer.offsetLeft;
const y = e.pageY - imgContainer.offsetTop;
setZoomPosition(x, y);
});
imgContainer.addEventListener("mouseleave", () => {
zoom.style.display = "none";
});
function setZoomPosition(x, y) {
const zoomWidth = zoom.offsetWidth;
const zoomHeight = zoom.offsetHeight;
const imgWidth = img.offsetWidth;
const imgHeight = img.offsetHeight;
const bgWidth = parseInt(
getComputedStyle(img).backgroundSize.split(" ")[0]
);
const bgHeight = parseInt(
getComputedStyle(img).backgroundSize.split(" ")[1]
);
const ratioX = bgWidth / imgWidth;
const ratioY = bgHeight / imgHeight;
const bgX = -x * ratioX + zoomWidth / 2;
const bgY = -y * ratioY + zoomHeight / 2;
const offsetX = x - zoomWidth / 2;
const offsetY = y - zoomHeight / 2;
if (bgX < 0) {
bgX = 0;
} else if (bgX > bgWidth - zoomWidth / ratioX) {
bgX = bgWidth - zoomWidth / ratioX;
}
if (bgY < 0) {
bgY = 0;
} else if (bgY > bgHeight - zoomHeight / ratioY) {
bgY = bgHeight - zoomHeight / ratioY;
}
zoom.style.backgroundPositionX = bgX + "px";
zoom.style.backgroundPositionY = bgY + "px";
zoom.style.left = offsetX + "px";
zoom.style.top = offsetY + "px";
zoom.style.display = "block";
// 显示放大镜
}
</script>
</body>
</html>
到此为止,通过以上步骤和示例,我们就能够成功地实现一个用JavaScript实现的图片放大镜效果!
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生js实现一个放大镜效果超详细 - Python技术站