js实现放大镜案例源码

最新推荐文章于 2023-02-26 15:12:33 发布
和蔼的阿木木o
最新推荐文章于 2023-02-26 15:12:33 发布
阅读量193
点赞数
分类专栏： js 文章标签： javascript css html
本文链接：https://blog.csdn.net/m0_59642141/article/details/126431081
版权
js 专栏收录该内容
52 篇文章 1 订阅
订阅专栏
<style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        .box {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            box-shadow: 0 0 0 2px #00f;
        }

        .box .bon {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            display: none;
            background-color: rgba(22, 113, 231, 0.6);
        }

        .box .big {
            position: absolute;
            left: 450px;
            top: 0px;
            width: 400px;
            height: 400px;
            display: none;
            border: 1px solid #000;
            overflow: hidden;
        }

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

        .small {
            display: flex;
            align-items: center;
            padding-top: 10px;
            position: relative;
            width: 400px;
            height: 67px;
            margin: 0 auto;

        }

        .small #list {
            overflow: hidden;
            flex: 1;
        }

        .small #list ul {
            display: flex;
        }

        .small #list ul li>img {
            margin: 0px 5px;
            width: 67px;
            height: 67px;
        }

        .small>span {
            color: #666;
            display: inline-block;
            text-align: center;
            line-height: 66px;
            vertical-align: middle;
            width: 35px;
            height: 66px;
            border: 1px solid #eee;
            background-color: #fff;
            cursor: pointer;
        }



        .small .left:hover {
            color: red;
        }


        .small .right:hover {
            color: red;
        }
    </style>
</head>

<body>
    <!--中等图带遮罩层-->
    <div class="box">
        <img src="https://kaola-haitao.oss.kaolacdn.com/777ac6210f95c08dd909b0bf7eecdc56.jpg?x-oss-process=image/resize,w_800/quality,q_85"
            style="width:400px ;height:400px" alt="">
        <!--遮罩层-->
        <div class="bon"></div>
        <!--放大镜div -->
        <div class="big">
            <img src="https://kaola-haitao.oss.kaolacdn.com/777ac6210f95c08dd909b0bf7eecdc56.jpg?x-oss-process=image/resize,w_800/quality,q_85"
                style="width:800px ;height:800px" alt="">
        </div>
    </div>
    <!--小图-->
    <div class="small">
        <span class="left">&lt;</span>
        <div id="list">
            <ul>
                <li><img src="https://kaola-haitao.oss.kaolacdn.com/71674b834925f7fc8310d21b038a2c14.jpg?x-oss-process=image/resize,w_800/quality,q_85"
                        alt=""></li>
                <li><img src="https://kaola-haitao.oss.kaolacdn.com/dbbee80c1d53159b56e972984b661049.jpg?x-oss-process=image/resize,w_800/quality,q_85"
                        alt=""></li>
                <li><img src="https://kaola-haitao.oss.kaolacdn.com/c2671bab3af4c4f6197759436b017137.jpg?x-oss-process=image/resize,w_800/quality,q_85"
                        alt=""></li>
                <li><img src="https://kaola-haitao.oss.kaolacdn.com/890e0b96a481a24d9b83e4f198bd4b60.jpg?x-oss-process=image/resize,w_800/quality,q_85"
                        alt=""></li>
                <li><img src="https://kaola-haitao.oss.kaolacdn.com/c2671bab3af4c4f6197759436b017137.jpg?x-oss-process=image/resize,w_800/quality,q_85"
                        alt=""></li>
                <li><img src="https://kaola-haitao.oss.kaolacdn.com/71674b834925f7fc8310d21b038a2c14.jpg?x-oss-process=image/resize,w_800/quality,q_85"
                        alt=""></li>
                <li><img src="https://kaola-haitao.oss.kaolacdn.com/dbbee80c1d53159b56e972984b661049.jpg?x-oss-process=image/resize,w_800/quality,q_85"
                        alt=""></li>
            </ul>
        </div>
        <span class="right">&gt;</span>
    </div>
</body>
<script>
    var odiv1 = document.querySelector(".box");  //中等图div
    var obon = document.querySelector(".box .bon"); //获取遮罩层
    var odiv2 = document.querySelector(".big");  //获取放大镜div
    var bigImg = document.querySelector(".big>img");  //放大镜div里的大图
    var ul = document.querySelector("#list ul");  //获取ul
    console.log(ul);
    var lookpic = document.querySelectorAll("#list li");  //获取小图里所有li
    var btn1 = document.querySelector(".left"); //获取左侧按钮
    var btn2 = document.querySelector(".right"); //获取右侧按钮
    var index = 0;
    var liWidth = lookpic[0].offsetWidth; //每一个li的宽度
    odiv1.onmouseover = function () {
        obon.style.display = "block";
        obon.style.cursor = "move";
        odiv2.style.display = "block";
    }
    odiv1.onmouseout = function () {
        obon.style.display = "none";
        odiv2.style.display = "none";
    }
    odiv1.onmousemove = function (ev) {
        var lf = ev.clientX - obon.offsetWidth / 2 - odiv1.offsetLeft; //遮罩层鼠标水平位置
        var tp = ev.clientY - obon.offsetHeight / 2 - odiv1.offsetTop; //遮罩层鼠标垂直位置
        if (lf <= 0) {
            lf = 0;
        } else if (lf >= odiv1.offsetWidth - obon.offsetWidth) { //遮罩层在div里移动的距离，不能出div
            lf = odiv1.offsetWidth - obon.offsetWidth;
        }

        if (tp <= 0) {
            tp = 0;
        } else if (tp >= odiv1.offsetHeight - obon.offsetHeight) {
            tp = odiv1.offsetHeight - obon.offsetHeight;
        }
        obon.style.left = lf + "px";
        obon.style.top = tp + "px";

        // var bigX = lf * (bigImg.offsetWidth - odiv2.offsetWidth) / (odiv1.offsetWidth - obon.offsetWidth); //这个是lf*鼠标水平位置移动的比例
        // var bigY = tp * (bigImg.offsetHeight - odiv2.offsetHeight) / (odiv1.offsetHeight - obon.offsetHeight); //这个是lf*鼠标水平垂直移动的比例
        bigImg.style.left = -lf * 2 + "px";  //遮罩层向右移动，放大镜里的图向左移动，比例为2倍关系
        bigImg.style.top = -tp * 2 + "px";  //遮罩层向下移动，放大镜里的图向上移动，比例为2倍关系
    }
    // 鼠标移入小图上方，把中图地址换为小图地址
    for (var i = 0; i < lookpic.length; i++) {
        lookpic[i].onmouseover = function (ev) {
            // console.log(this);
            this.style.boxShadow = '0 0 0 1px #f00';
            if (ev.target.src != undefined) {
                odiv1.firstElementChild.src = ev.target.src; //中图获取小图
                odiv2.firstElementChild.src = ev.target.src;    //大图获取小图
            }
        }
        lookpic[i].onmouseout = function () {
            this.style.boxShadow = '';
        }
    }
    //点击右侧按钮切换小图图片
    btn2.addEventListener("click", function () {
        index++;
        if (index >= lookpic.length - 4) {
            index = lookpic.length - 4;
        }
        ul.style.marginLeft = -index * liWidth + 'px';
        console.log(ul.style.marginLeft);
        ul.style.transition = "0.5s";
    })
    //点击左侧按钮切换小图图片

    btn1.addEventListener("click", function () {

        index--;
        console.log(index);
        if (index <= lookpic.length - 8) {
            index = lookpic.length - 7;
        }
        ul.style.marginLeft = -index * liWidth + 'px';
        console.log(ul.style.marginLeft);
        ul.style.transition = "0.5s";
    })
</script>