点击图片放大缩小（遮罩）

前言

想通过js做一个点击图片，将图片放大到屏幕中间，并遮罩其他地方，再点击图片或遮罩部分，还原图片的功能。

1.创建div用于放置放大后的图片和遮罩区域
代码如下（示例）：

...
    
...



    
    

        
    

2.设置图片最大高度（根据自己要求）
代码如下（示例）：

3.通过js控制放大位置
代码如下（示例）：

// 图片点击放大
$('.showImg').on('click', function(){
    imgShow("#imgDiv", "#bigImg", $(this), "#back-curtain");
});

function imgShow(imgDiv, bigImg, _this, curtain) {
    // 图片路径
    var src = _this.attr("src");
    $(bigImg).attr("src", src);
    // 加载图片,获取当前点击图片的真实大小
    $("").attr("src", src).load(function(){
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var realWidth = this.width;
        var realHeight = this.height;
        var imgWidth, imgHeight;
        var scale = 0.8;
        if (realHeight > windowHeight * scale) {
            imgHeight = windowHeight * scale;
            imgWidth = imgHeight / realHeight * realWidth;
            if (imgWidth > windowWidth * scale) {
                imgWidth = windowWidth * scale;
            }
        } else if (realWidth > windowWidth * scale) {
            imgWidth = windowWidth * scale;
            imgHeight = imgWidth / realWidth * realHeight;
        } else {
            imgWidth = realWidth;
            imgHeight = realHeight;
        }
        $(bigImg).css({'width':imgWidth});
        //计算图片与窗口左边距
        var left = (windowWidth - imgWidth) / 2;
        //计算图片与窗口上边距 
        var top = (windowHeight - imgHeight) / 2;
        // 图片位置
        $(imgDiv).css({'top':top, 'left':left});
        // 图片淡入
        $(curtain).fadeIn("fast");
        // 遮罩效果
        $(curtain).css({
            'position':'fixed',
            'overflow-y':'auto',
            'width':'100%',
            'height':'100%',
            'z-index':'998'
        }).show();
    });
    // 点击图片或遮罩，图片淡出
    $(curtain).on('click', function(){
        $(this).fadeOut("fast");
    });
}

实际效果
初始（示例）：

image

点击放大（示例）：

image

点击还原（示例）：

image

创作不易，关注、点赞就是对作者最大的鼓励，欢迎在下方评论留言
求关注，定期分享Java知识，一起学习，共同成长。