实现放大镜效果-优快云博客

本文链接：https://blog.youkuaiyun.com/ww_Filling_it/article/details/125285176

这个博客展示了如何使用HTML、CSS和JavaScript创建一个网页版的放大镜功能。通过鼠标悬停在商品图片上，出现一个半透明的放大镜层，实时显示鼠标的当前位置在大图上的对应细节，提供更清晰的查看体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
        .shop{
            float: left;
            width: 300px;
            height: 300px;
            border: 1px solid gray;
            background-image: url(https://img0.baidu.com/it/u=3505923225,1841004151&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=427);
            background-size: 100% 100%;
            position: relative;
            margin-left: 200px;
        }
        .slider{
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: cyan;
            display: none;
            opacity: .5;
        }
        .mirror{
            width: 400px;
            height: 400px;
            border: 1px solid gray;
            float: left;
            overflow: hidden;
            position: relative;
            display: none;
        }
        .mirror img{
            width: 800px;
            height: 800px;
            position: absolute;
        }
    </style>
</head>
 
<body>
    <div class="shop">
        <div class="slider"></div>
    </div>
    <div class="mirror">
        <img src="https://img0.baidu.com/it/u=3505923225,1841004151&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=427" alt="">
    </div>
</body>
<script>
    var dShop = document.getElementsByClassName("shop")[0];
    var dSlider = document.getElementsByClassName("slider")[0];
    var dMirror = document.getElementsByClassName("mirror")[0];
    var img= document.getElementsByTagName("img")[0];
 
 
    dShop.onmouseenter = function(){
        dSlider.style.display = "block";
        dMirror.style.display = "block";
    }
    dShop.onmouseleave = function(){
        dSlider.style.display = "none";
        dMirror.style.display = "none";
    }
    dShop.onmousemove = function(e){
        var x = e.clientX - this.offsetLeft - 75;
        var y = e.clientY - this.offsetTop - 75;
 
        x = (x<0)?0:x;
        x = (x>150)?150:x;
        y = (y<0)?0:y;
        y = (y>150)?150:y;
 
        dSlider.style.left = x + 'px';
        dSlider.style.top = y + 'px';
 
        // 让大图片进行等比例的移动
        var l1 = dSlider.offsetLeft;
        var t1 = dSlider.offsetTop;
        var w1 = 300;
        var w2 = 800;
        var l2 = l1 * w2/w1* -1;
        var t2 = t1 * w2/w1* -1;
        img.style.left = l2 + 'px';
        img.style.top = t2 + 'px';
    }
</script>
 
</html>