js仿购物车放大镜效果

唯纞＆瑞、

于 2021-05-16 22:34:51 发布

阅读量124

点赞数 1

文章标签： html js

本文链接：https://blog.csdn.net/weixin_44863580/article/details/116904506

版权

在这里插入图片描述

HTML
 <div class="itemrea">
        <div class="pic">
            <img src="./img/素材01.jpeg" alt="">
            <div class="cover" style="display: none;">

            </div>
        </div>
        <ul class="list">
            <li>
                <img class="current" src="./img/素材01.jpeg" alt="">
            </li>
            <li>
                <img src="./img/素材02.jpeg" alt="">
            </li>
            <li>
                <img src="./img/素材03.jpeg" alt="">
            </li>
            <li>
                <img src="./img/素材04.jpeg" alt="">
            </li>
        </ul>
        <div class="detail" style="display: none;">
            <img src="./img/素材01.jpeg" alt="">
        </div>
    </div>

CSS
<style>
        body {
            background-color: #d8e7fa;
        }

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .itemrea {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 100px auto;
        }

        .itemrea .pic img {
            width: 400px;
            height: 400px;
        }

        .itemrea .pic .cover {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 200, 0.6);
        }

        .itemrea .list {
            display: flex;
            justify-content: space-around
        }

        .itemrea .list img {
            width: 80px;
            height: 70px;
        }


        .itemrea .detail {
            position: absolute;
            top: 0;
            left: 420px;
            width: 400px;
            height: 400px;
            overflow: hidden;
        }

        .detail img {
            position: absolute;
            left: 0;
            top: 0;
            width: 1600px;
            height: 1600px;
        }

        .itemrea .list .current {
            border: 2px red solid;
        }
    </style>

JS

<script>
        var list = document.querySelector(".list"),
            imgs = list.querySelectorAll("img"),
            img = document.querySelector(".pic img"),
            pic = document.querySelector(".itemrea .pic"),
            cover = document.querySelector(".cover"),
            detail = document.querySelector(".detail"),
            imgg = document.querySelector(".detail img");
        list.addEventListener("mouseover", function (e) {
            if (e.target.tagName == 'IMG') {
                img.src = e.target.src;
                imgg.src = e.target.src;
                imgs.forEach(function (item, index) {
                    item.className = "";
                })
                e.target.className = 'current';

            }
        })
        pic.addEventListener("mouseover", function () {
            cover.style.display = 'block'
            detail.style.display = 'block'
        })
        pic.addEventListener("mouseout", function (e) {
            cover.style.display = 'none'
            detail.style.display = 'none'
        })
        pic.addEventListener("mousemove", function (e) {
            
            var mouseLeft = e.clientX - pic.getBoundingClientRect().left - cover.offsetWidth / 2,
                mouseTop = e.clientY - pic.getBoundingClientRect().top - cover.offsetHeight / 2;
            //判断左边界 不让遮罩层出框
            if (mouseLeft <= 0) {
                mouseLeft = 0
            }
            //判断上边界 不让遮罩层出框
            if (mouseTop <= 0) {
                mouseTop = 0
            }
            //判断右边界 不让遮罩层出框
            //pic.offsetWidth 获取左边框的宽度
            if (mouseLeft >= pic.offsetWidth - cover.offsetWidth) {
                mouseLeft = pic.offsetWidth - cover.offsetWidth
            }
            //判断下边界 不让遮罩层出框
            if (mouseTop >= pic.offsetHeight - cover.offsetHeight) {
                mouseTop = pic.offsetHeight - cover.offsetHeight
            }
            cover.style.left = mouseLeft + 'px';
            cover.style.top = mouseTop + 'px';
            imgg.style.left = - (imgg.offsetWidth * (mouseLeft / pic.offsetWidth)) + 'px'
            imgg.style.top = - (imgg.offsetHeight * (mouseTop / pic.offsetHeight)) + 'px'

        })
    </script>