jq编写放大镜

最新推荐文章于 2023-03-31 13:39:30 发布
Eureka464
最新推荐文章于 2023-03-31 13:39:30 发布
阅读量101
点赞数
文章标签： html css javascript
本文链接：https://blog.csdn.net/weixin_70227543/article/details/125303632
版权

        <!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>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
    .box{
        display: flex;
    }
    .small img {
        width: 50px;
        height: 50px;
        display: block;
        border: 1px solid #555;
        margin: 10px;
        cursor: pointer;
    }

    .small .active {
        border-color: #e77600;
        box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
    }

    .middle {
        width: 500px;
        height: 500px;
        position: relative;
        margin: 10px;
    }

    .middle img {
        width: 500px;
        height: 500px;
    }

    .middle .mask {
        width: 100px;
        height: 100px;
        background-color: rgba(0, 100, 200, 0.3);
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        cursor: move;
    }

    .middle .big {
        width: 400px;
        height: 400px;
        position: absolute;
        left: 105%;
        top: 0;
        overflow: hidden;
        display: none;
    }

    .middle .big img {
        width: 2000px;
        height: 2000px;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<body>
    <div class="box">
        <div class="small">
            <img class="active" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F07%2F20200407001816_sxbcg.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657885333&t=c54acb6253ad1b9a625dbfa2031c1ddf" alt="">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F24%2F20210224222557_a57ac.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657885333&t=2ebffd4cb494e46ea92563d34bc6fed4" alt="">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201901%2F12%2F20190112235134_RTyKN.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657885423&t=f15684d1ea95ce24f6dc6b27f842d66f" alt="">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F09%2F20200409085108_dshqx.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657885475&t=615a7d670e161e69fb72331389e3db9e" alt="">
            <img src="https://img2.baidu.com/it/u=518940714,1656717865&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=454" alt="">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.15lu.com%2Fdedecms%2Fuploads%2Fallimg%2F190310%2F3-160526104330263.jpg&refer=http%3A%2F%2Fwww.15lu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657885565&t=dd63b3acd33824e9aa646e152a551311" alt="">
        </div>
        <div class="middle">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F07%2F20200407001816_sxbcg.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657885333&t=c54acb6253ad1b9a625dbfa2031c1ddf">
            <div class="mask"></div>
            <div class="big">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F07%2F20200407001816_sxbcg.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657885333&t=c54acb6253ad1b9a625dbfa2031c1ddf">
            </div>
        </div>
    </div>
    <script>
         
        $('.small img').click(function () {
            //类名设置
            $(this).addClass('active').siblings().removeClass('active')
            // 小图与中图的地址，链接
            $('.middle>img').attr('src', $(this).attr('src'))
            // 大图与中图的地址，链接
            $('.big>img').attr('src', $(this).attr('src'))
        })
        //鼠标移入显示隐藏
        $('.middle').hover(function () {
            $('.big').show()
            $('.mask').show()

            //移动事件
            $('.middle').mousemove(function (e) {
                //获取鼠标位置
                var x = e.pageX
                var y = e.pageY
                var l = x - $('.mask').outerWidth() / 2
                var t = y - $('.mask').outerHeight() / 2
                //对l,t的限制
                if (l < $('.middle').offset().left + parseInt($('.middle').css('border-left-width'))) {
                    l = $('.middle').offset().left + parseInt($('.middle').css('border-left-width'))
                }
                if (t < $('.middle').offset().top + parseInt($('.middle').css('border-top-width'))) {
                    t = $('.middle').offset().top + parseInt($('.middle').css('border-top-width'))
                }
                if (l > $('.middle').offset().left + parseInt($('.middle').css('border-left-width')) + $(
                        '.middle').innerWidth() - $('.mask').outerWidth()) {
                    l = $('.middle').offset().left + parseInt($('.middle').css('border-left-width')) + $(
                        '.middle').innerWidth() - $('.mask').outerWidth()
                }
                if (t > $('.middle').offset().top + parseInt($('.middle').css('border-top-width')) + $(
                        '.middle').innerHeight() - $('.mask').outerHeight()) {
                    t = $('.middle').offset().top + parseInt($('.middle').css('border-top-width')) + $(
                        '.middle').innerHeight() - $('.mask').outerHeight()
                }
                //设置遮罩移动位置
                $('.mask').offset({
                    left: l,
                    top: t
                })
                //获取遮罩相对于中盒子的距离
                var l1 = $('.mask').position().left / $('.middle').innerWidth() * $('.big img').width()
                var t1 = $('.mask').position().top / $('.middle').innerHeight() * $('.big img').height()
                $('.big>img').css({
                    left: -l1 + 'px',
                    top: -t1 + 'px'
                })
            })
        }, function () {
            $('.big').hide()
            $('.mask').hide()
        })
    

    </script>

</html>