Jquery 图片悬浮放大

2024-02-02 12:19:34

第一种样式

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>图片放大</title>
    <script src="../网站后台/js/jquery-3.4.1.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #small{
            width: 500px;
            height: 500px;
            border: 3px black solid;
            margin-left: 200px;
            position: relative;
        }
        #small img{
            width: 500px;
            height: 500px;
        }
        #big{
            width: 500px;
            height: 500px;
            border: 3px black solid;
            overflow: hidden;
            margin-left: 10px;
        }
        #big img{
            width: 1000px;
            height: 1000px;
        }
        .container{
            display: flex;
        }
        /* 蒙层 */
        #mask{
            width: 150px;
            height: 150px;
            background: rgba(0, 0, 0, 0.3);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="small">
            <img src="img/biao1.jpg" alt="">
            <div id="mask"></div>
        </div>
        <div id="big">
            <img src="img/biao1.jpg" alt="">
        </div>
    </div>
<script>
        // 节流
        function throttle(fn, delay) {
            let timer = null;
            let flat = true;

            return function () {
                if(!flat) {
                    return;
                }

                flat = false;
                const event = arguments;
                timer && clearTimeout(timer);
                timer = setTimeout(() => {
                    fn.apply(this, event);
                    flat = true;
                }, delay)
            };
        }

        $("#small").mouseenter(function(){
            $("#mask, #big").show()
        }).mouseleave(function(){
            $("#mask, #big").hide()
        });

        $("#small").mousemove(throttle(showBigImg, 50));

        function showBigImg(e) {
            // 计算遮罩层的位置
            let x = e.pageX - $('#small').offset().left - $('#mask').width()/2;
            let y = e.pageY - $('#small').offset().top - $('#mask').height()/2;

            // 最小偏移值
            x<0 ? x=0 : x;
            y<0 ? y=0 : y;

            // 最大偏移值（偏移量+蒙层宽高 < 盒子宽高）
           (x + $('#mask').width()) > $('#small').width() ? x= ($('#small').width() - $('#mask').width()) : x;
           (y + $('#mask').height()) > $('#small').height() ? y= ($('#small').height() - $('#mask').height()) : y;


            $('#mask').css({
                left: `${x}px`,
                top: `${y}px`
            });

            // 计算比例
            const scaleX = $('#big img').width()/$('#small img').width();
            const scaleY = $('#big img').height()/$('#small img').height();

            // 移动滚动条
            $('#big').scrollLeft(scaleX*x - $('#mask').width()/2);
            $('#big').scrollTop(scaleY*y - $('#mask').height()/2);
        }
</script>
</body>
</html>

第二种样式

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>图片放大</title>
    <script src="../网站后台/js/jquery-3.4.1.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #small{
            width: 500px;
            height: 500px;
            border: 3px black solid;
            margin-left: 200px;
            overflow: hidden;
        }
        #small:hover{
            cursor: crosshair;
        }
        #small img{
            width: 500px;
            height: 500px;
        }
        /* 蒙层 */
        #mask{
            width: 150px;
            height: 150px;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="small">
        <img src="img/biao1.jpg" alt="">
        <div id="mask"></div>
    </div>
</div>
<script>
    // 节流
    function throttle(fn, delay) {
        let timer = null;
        let flat = true;

        return function () {
            if(!flat) {
                return;
            }

            flat = false;
            const event = arguments;
            timer && clearTimeout(timer);
            timer = setTimeout(() => {
                fn.apply(this, event);
                flat = true;
            }, delay)
        };
    }

    $("#small").mouseenter(function(){
        $("#small img").css({
            width: '1000px',
            height: '1000px'
        })
    }).mouseleave(function(){
        $("#small img").css({
            width: '500px',
            height: '500px'
        })
    });

    $("#small").mousemove(throttle(showBigImg, 50));

    function showBigImg(e) {
        // 计算遮罩层的位置
        let x = e.pageX - $('#small').offset().left - $('#mask').width()/2;
        let y = e.pageY - $('#small').offset().top - $('#mask').height()/2;

        // 最小偏移值
        x<0 ? x=0 : x;
        y<0 ? y=0 : y;

        // 最大偏移值（偏移量+蒙层宽高 < 盒子宽高）
        (x + $('#mask').width()) > $('#small').width() ? x= ($('#small').width() - $('#mask').width()) : x;
        (y + $('#mask').height()) > $('#small').height() ? y= ($('#small').height() - $('#mask').height()) : y;

        $('#mask').css({
            left: `${x}px`,
            top: `${y}px`
        });

        // 计算比例
        const scaleX = 2;
        const scaleY = 2;

        // 移动滚动条
        $('#small').scrollLeft(scaleX*x - $('#mask').width()/2);
        $('#small').scrollTop(scaleY*y - $('#mask').height()/2);
    }
</script>
</body>
</html>

码农公寓

第一种样式

第二种样式

相关文章