JS放大镜案例

程序员文章站 2022-06-01 17:01:10

...

如今我们在在各大电商网站购物时都有过这样的体验：当看上某件心意的商品时，我们可以点击进入商品主界面。在主界面里面有一个专门用来展示商品的大方框，大方框下面是一些小的方框，这些小的方框里面的图片分别从不同的角度来展示此商品。当我们鼠标点击选择下面的小图片时，大方框里面就会显示你点击选择的这张图片。接着，当你把鼠标放到大图片上时，大图片上会出现一个半透明的小方块，与此同时，大图片旁边也会出现一个方框，方框里面就是显示你半透明小方块区域内图片。当透明小方块在大图片上移动时，旁边的方框会随着鼠标的移动来等比放大方块中的图片，并展示到旁边的方框中，这样我们就能很细致的看到商品的细节部分。其实，这种功能的实现就是运用了放大镜的原理。

放大镜原理图：

放大镜代码实现：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>放大镜案例</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
        }

        .zoom-box {
            width: 452px;
            position: relative;
        }

        .small-box {
            position: relative;
            border: 1px solid #ccc;
        }

        .small-box img {
            width: 100%;
            height: 100%;
        }

        .small-box .square {
            position: absolute;
            left: 0;
            top: 0;
            background: yellow;
            opacity: 0.5;
            /*opacity：透明度*/
            /*display: none;*/
        }

        .small-box .mask {
            width: 100%;
            height: 100%;
            position: absolute;  /*绝对定位*/
            top: 0;  /*盒子左上角的点距父盒子左侧的距离*/
            left: 0; /*盒子左上角的点距父盒子顶部的距离*/
        }

        .img-list ul::after {
            clear: both;
            content: '';
            display: table;
        }

        .img-list ul li {
            float: left;
            margin: 0 10px;
            padding: 6px;
        }

        .img-list img {
            border: 2px solid transparent;
        }

        .img-list img.active {
            border: 2px solid red;
        }

        .big-box {
            position: absolute;
            top: 0;
            left: 100%;
            margin-left: 2px;
            border: 1px solid #cccccc;
            width: 500px;
            height: 500px;
            overflow: hidden;  /*溢出的部分：隐藏*/
            display: none;
        }

        .big-box img {
            position: absolute;
            top: 0;
            left: 0;
        }

    </style>
</head>
<body>
<!-- 布局-->
<div class="zoom-box"><!-- 容器-->
    <div class="small-box"><!-- 小图片容器-->
        <img src="mid/01.jpg" alt="" id="smallimg"/>
        <div class="square" id="square"></div><!-- 鼠标选中框-->
        <div class="mask" id="smallbox"></div><!-- 鼠标悬浮位置-->
    </div>
    <div class="img-list"><!-- 图片列表-->
        <ul>
            <li>
                <img name="imgs" src="small/01.jpg" alt="" data-small="mid/01.jpg"
                     data-big="big/01.jpg"/>
            </li>
            <li>
                <img name="imgs" src="small/02.jpg" alt="" data-small="mid/02.jpg" data-big="big/02.jpg"/>
            </li>
            <li>
                <img name="imgs" src="small/03.jpg" alt="" data-small="mid/03.jpg" data-big="big/03.jpg"/>
            </li>
            <li>
                <img name="imgs" src="small/04.jpg" alt="" data-small="mid/04.jpg" data-big="big/04.jpg"/>
            </li>
        </ul>
    </div>
    <div class="big-box" id="bigbox"><!-- 放大镜-->
        <img src="big/01.jpg" alt="" id="bigimg"/>
    </div>
</div>
<script>
    //先去获得一些元素，方便后期操作
    var smallbox = document.getElementById("smallbox"); //小盒子 鼠标悬浮容器
    var smallimg = document.getElementById("smallimg"); //小图片
    var square = document.getElementById("square"); //鼠标方块
    var bigbox = document.getElementById("bigbox"); //右侧大盒子
    var bigimg = document.getElementById("bigimg"); //右侧大图片
    var imgs = document.getElementsByName("imgs"); //底部图片集合

    //给底部图片集合绑定鼠标移入事件，鼠标移入后，切换大图片和小图片
    for (var i = 0; i < imgs.length; i++) {
        //鼠标移入
        imgs[i].onmouseover = function () {
            //获取大图片和小图片的地址
            smallimg.src = this.getAttribute("data-small");
            bigimg.src = this.getAttribute("data-big");
            //调整样式
            this.className = "active";
        }
        //鼠标移出
        imgs[i].onmouseout = function () {
            //清除样式
            this.className = "";
        }
    }

    //给小盒子绑定鼠标的相关事件 onmouseover onmousemove onmouseout
    //鼠标移入
    smallbox.onmouseover = function () {
        //显示小方块
        square.style.display = "block";
        //显示大盒子
        bigbox.style.display = "block";
        //动态设置方块的宽高
        var width = smallimg.offsetWidth * bigbox.offsetWidth / bigimg.offsetWidth;
        var height = smallimg.offsetHeight * bigbox.offsetHeight / bigimg.offsetHeight;
        square.style.width = width + "px";
        square.style.height = height + "px";
    }

    //鼠标移动
    smallbox.onmousemove = function (event) {
        //方块距左侧偏移量 = 鼠标距左侧（x）的偏移量-方块的宽度/2;
        var x = event.offsetX - square.offsetWidth / 2;
        //方块距顶部偏移量 = 鼠标距顶部（y）侧的偏移量-方块的高度/2;
        var y = event.offsetY - square.offsetHeight / 2;
        //x,y的极限值（小）
        x = x < 0 ? 0 : x;
        y = y < 0 ? 0 : y;
        //x,y的极限值（大）
        x = x > smallbox.offsetWidth - square.offsetWidth ? smallbox.offsetWidth - square.offsetWidth : x;
        y = y > smallbox.offsetHeight - square.offsetHeight ? smallbox.offsetHeight - square.offsetHeight : y;
        //设置鼠标方块x，y的坐标
        square.style.left = x + "px";
        square.style.top = y + "px";

        //计算右侧大图片的x，y的坐标
        var b_x = -x * bigimg.offsetWidth / smallimg.offsetWidth;
        var b_y = -y * bigimg.offsetHeight / smallimg.offsetHeight;
        //设置大图片x，y的坐标
        bigimg.style.left = b_x + "px";
        bigimg.style.top = b_y + "px";
    }

    //鼠标移出
    smallbox.onmouseout = function () {
        //隐藏鼠标方块和右侧大盒子
        square.style.display = "none";
        bigbox.style.display = "none";
    }
</script>
</body>
</html>