JS放大镜效果（附源码）

_耀北

已于 2024-08-24 23:01:34 修改

阅读量160

点赞数 4

文章标签：前端 js

于 2024-08-24 21:48:08 首次发布

本文链接：https://blog.csdn.net/weixin_72288930/article/details/141471557

版权

放大镜效果图

这个效果展示了一个电商网站上常见的商品图片悬停放大功能。当用户将鼠标悬停在商品图片上时，图片旁边会弹出一个放大的细节框，显示商品的放大区域。用户可以通过移动鼠标来查看商品的更多细节，放大的图片会根据鼠标的位置实时更新，从而实现一个互动性强且直观的商品细节预览效果。这个功能可以帮助用户更好地了解商品的质地、材质等细节，从而提升购物体验。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container">
        <img src="https://imgservice.suning.cn/uimg1/b2c/image/vHQ8wwxtFBXT2FFqm1mLuA.jpg_800w_800h_4e" alt="商品图片" class="product-image">
        <div class="zoom-box">
            <img src="https://imgservice.suning.cn/uimg1/b2c/image/vHQ8wwxtFBXT2FFqm1mLuA.jpg_800w_800h_4e" alt="放大细节" class="zoomed-image">
        </div>
    </div>
    
</body>
<script src="index.js"></script>
</html>

css

* {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 300px;
    /* 商品图片的宽度 */
    height: 300px;
    /* 商品图片的高度 */
}

.product-image {
    width: 100%;
    height: 100%;
}

.zoom-box {
    display: none;
    /* 默认隐藏 */
    position: absolute;
    left: 305px;
    /* 放大框的位置，你可以根据需要调整 */
    top: 0;
    width: 400px;
    /* 放大框的宽度 */
    height: 400px;
    /* 放大框的高度 */
    overflow: hidden;
    border: 1px solid #000;
}

.zoomed-image {
    position: absolute;
    width: 1000px;
    /* 根据需要调整 */
    height: 1000px;
    /* 根据需要调整 */
    transform-origin: top left;
    pointer-events: none;
}

const container = document.querySelector('.container');
const productImage = document.querySelector('.product-image');
const zoomBox = document.querySelector('.zoom-box');
const zoomedImage = document.querySelector('.zoomed-image');

productImage.addEventListener('mousemove', function(e) {
    const containerRect = container.getBoundingClientRect();
    
    // 计算鼠标相对于图片的位置
    const x = e.clientX - containerRect.left;
    const y = e.clientY - containerRect.top;
    
    // 显示放大框
    zoomBox.style.display = 'block';
    
    // 根据鼠标位置移动放大图片
    zoomedImage.style.transform = `translate(-${x * 2}px, -${y * 2}px)`;
});

productImage.addEventListener('mouseleave', function() {
    // 鼠标离开图片时隐藏放大框
    zoomBox.style.display = 'none';
});

_耀北

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS放大镜效果（附源码）

这个效果展示了一个电商网站上常见的商品图片悬停放大功能。当用户将鼠标悬停在商品图片上时，图片旁边会弹出一个放大的细节框，显示商品的放大区域。用户可以通过移动鼠标来查看商品的更多细节，放大的图片会根据鼠标的位置实时更新，从而实现一个互动性强且直观的商品细节预览效果。这个功能可以帮助用户更好地了解商品的质地、材质等细节，从而提升购物体验。
复制链接

扫一扫