一个图片放大镜特效，当用户将鼠标悬停在图片上时，会显示一个放大区域。
关键点总结
- 基本布局
- 使用 Flexbox 布局使内容居中。
- 设置页面高度为视口高度，并移除默认边距。
- 容器和图片
.magnifier-container：设置相对定位，宽度为300px，高度为200px。.image：设置图片的宽度和高度为100%，并使用object-fit: cover以确保图片覆盖整个容器。
- 放大镜玻璃
.magnifier-glass：设置绝对定位，初始透明度为0，带有白色边框和阴影。background-image：设置背景图片。background-size：设置背景图片的大小以便放大。pointer-events: none：确保放大镜不会干扰鼠标事件。transition: opacity 0.3s：添加透明度过渡效果。
- 鼠标事件处理
mousemove事件：计算鼠标位置并调整放大镜的位置和背景图片的位置。mouseleave事件：当鼠标离开容器时，隐藏放大镜。
这段代码实现了一个简单的图片放大镜特效，当用户将鼠标悬停在图片上时，会显示一个放大区域，提供更好的细节查看体验。你可以根据需要调整图片、容器大小和其他样式属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
overflow: hidden;
}
.magnifier-container {
position: relative;
width: 300px;
height: 200px;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
.magnifier-glass {
position: absolute;
border: 3px solid #fff;
border-radius: 50%;
width: 100px;
height: 100px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
background-image: url('https://syjm.net/public/demo2.webp'); /* 示例图片 */
background-repeat: no-repeat;
background-size: 400% 400%; /* 放大倍数 */
z-index: 1;
}
.magnifier-container:hover .magnifier-glass {
opacity: 1;
}
</style>
</head>
<body>
<div class="magnifier-container">
<img src="https://syjm.net/public/demo2.webp" alt="Sample Image" class="image">
<div class="magnifier-glass"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const magnifierContainer = document.querySelector('.magnifier-container');
const magnifierGlass = document.querySelector('.magnifier-glass');
magnifierContainer.addEventListener('mousemove', (e) => {
// 获取容器的位置和尺寸
const rect = magnifierContainer.getBoundingClientRect();
// 计算鼠标相对于容器的位置
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
// 检查鼠标是否在容器内
if (x > magnifierContainer.offsetWidth || y > magnifierContainer.offsetHeight || x < 0 || y < 0) {
magnifierGlass.style.opacity = 0; // 鼠标不在容器内时隐藏放大镜
} else {
magnifierGlass.style.opacity = 1; // 显示放大镜
// 设置放大镜的位置
magnifierGlass.style.left = `${x - magnifierGlass.offsetWidth / 2}px`;
magnifierGlass.style.top = `${y - magnifierGlass.offsetHeight / 2}px`;
// 计算背景图片的位置
const bgX = ((x / magnifierContainer.offsetWidth) * 100) - 25;
const bgY = ((y / magnifierContainer.offsetHeight) * 100) - 25;
// 设置背景图片的位置
magnifierGlass.style.backgroundPosition = `${bgX}% ${bgY}%`;
}
});
magnifierContainer.addEventListener('mouseleave', () => {
magnifierGlass.style.opacity = 0; // 鼠标离开容器时隐藏放大镜
});
});
</script>
</body>
</html>
No responses yet