使用jQuery实现放大图效果

一、首先我们需要把页面画出来

        1，画出框架

<div class="box">
        <div class="tupian">
            <img
                src="https://img14.360buyimg.com/n0/jfs/t1/178469/14/4616/143349/60a26b86E45e2c962/1f93da665f0970f6.jpg">
            <div class="xuanzhong"></div>
        </div>
        <div class="fangda">
            <img
                src="https://img14.360buyimg.com/n0/jfs/t1/178469/14/4616/143349/60a26b86E45e2c962/1f93da665f0970f6.jpg">
        </div>
    </div>

2，添加样式

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 5px;
        }

        .tupian {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            float: left;
            position: relative;
        }

        .tupian img {
            width: 200px;
            height: 200px;
        }

        .fangda {
            /* 写完jq记得把这下面这行注释取消 */
             /* display: none; */
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            overflow: hidden;
            float: left;
        }

        .fangda img {
            width: 600px;
            height: 600px;
            position: relative;
            left: -100px;
            top: 0;
        }

        .xuanzhong {
             /* 写完jq记得把下面这行注释取消 */
             /* display: none; */
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            background-color: rgba(255, 228, 196, 0.5);
            position: absolute;
            top: 0;
            left: 0;
        }

    </style>

这样我们就有了一个静态的页面

然后使用 jQuery 把页面做活

首先引入jQuery

    <!-- 引入外网的jquery库文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

然后

<script>
        let tupian = $('.tupian')
        let xuanzhong = $('.xuanzhong')
        let fangda = $('.fangda img')
        let left1 = tupian.offset().left //获取box到浏览器左边的距离
        let top1 = tupian.offset().top //获取box到浏览器上面的距离
        // 图片选中移动
        tupian.mousemove(function (e) {
            // console.log(xuanzhong.offset().top);

            let {
                pageX,
                pageY
            } = e

            xuanzhong.css('display', 'block')
            // 计算鼠标指针距离边框的距离
            let mouseLeft = pageX - left1 - 1
            let mouseTop = pageY - top1 - 1
            // console.log(mouseLeft + ' ; ' + mouseTop);
            // xuanzhong最大left和top
            let maxLeft = tupian.innerWidth() - xuanzhong.outerWidth() / 2 + 1
            let maxTop = tupian.innerHeight() - xuanzhong.outerHeight() / 2 + 1
            // console.log(maxLeft + ' ; ' + maxTop);
            if (mouseLeft > maxLeft) mouseLeft = maxLeft
            if (mouseLeft < xuanzhong.outerWidth() / 2) mouseLeft = xuanzhong.outerWidth() / 2
            if (mouseTop > maxTop) mouseTop = maxTop
            if (mouseTop < xuanzhong.outerHeight() / 2) mouseTop = xuanzhong.outerHeight() / 2
            let left2 = mouseLeft - xuanzhong.outerWidth() / 2  //选中框left
            let top2 = mouseTop - xuanzhong.outerHeight() / 2  //选中框top
            xuanzhong.css('left', left2 + 'px')
            xuanzhong.css('top', top2 + 'px')
            fangda.css('left','-'+left2*3+'px')
            fangda.css('top','-'+top2*3+'px')
        })
        tupian.mouseenter(function(){
            xuanzhong.css('display','block')
            $('.fangda').css('display','block')
        })
        tupian.mouseleave(function(){
            xuanzhong.css('display','none')
            $('.fangda').css('display','none')
        })
    </script>

 就可以实现放大效果了

标签：jQuery,xuanzhong,tupian,效果,fangda,let,left,css,放大
来源： https://blog.csdn.net/ChrngFu/article/details/119379439