美文网首页
点击图片放大缩小(遮罩)

点击图片放大缩小(遮罩)

作者: 猫的树 | 来源:发表于2021-05-29 11:53 被阅读0次

前言

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

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

<!-- 我图片是放在一个td里面的(当然还有其它内容...)-->
<table>
...
    <td>
        <img id="showImg" class="showImg min" src="111.png"/>
    </td>
...
</table>
<!-- 遮罩区域(先将div隐藏)-->
<div id="back-curtain" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.5);z-index:998;width:100%;display:none;">
    <!--放大后的图片-->
    <div id="imgDiv" style="position:absolute;">
        <img id="bigImg" src="" />
    </div>
</div>

2.设置图片最大高度(根据自己要求)
代码如下(示例):

<style type="text/css">
    .min {
        max-height:25px;
    }
</style>

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);
    // 加载图片,获取当前点击图片的真实大小
    $("<img/>").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知识,一起学习,共同成长。

相关文章

  • 点击图片放大缩小(遮罩)

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

  • iOS 中实现图片点击全屏预览

    点击单张图片的全屏预览和双指捏合缩小放大

  • vue 点击当前图片放大缩小

    如果是点击一张图,弹出一张大图,那自然是简单的,但是如果只在当前区域放大缩小,该怎么做呢? 一、html中事件绑定...

  • PS的简单使用

    快捷键 ctrl + alt + 空格 按住不放,点击鼠标放大缩小图片 alt + delete ...

  • 转场动画(三) --交互式转场缩小动画

    一 捏合放大的图片自动缩小隐藏 在点击放大的视图容器中有scrollView 可以缩放 在scrollView的...

  • javascript案例

    1 图片的放大和缩小效果演示 1 图片的放大和缩小效果演示原理说明:图片逐渐放大和逐渐缩小是指在一定时间内图片发生...

  • PS常用快捷键

    吸色 点击字母 i 拖动点击字母 v 放大图层 放大缩小 修改画布大小 修改图片背景色选中图层,右击图层-混合选项...

  • iOS中使图片放缩前后轻拍点的位置不变

    添加轻拍手势实现点击图片能放大缩小,并且点击处在放缩前后位置不变,就好像点哪里就把哪里变大. 要放大scale倍,...

  • CGAffineTransform

    问题:在做图片放大缩小的时候,因为需求是一张图片多次放大,缩小, 先用 放大:view.transform=CGA...

  • PS入门教程笔记

    1、缩放工具:点击缩放工具后单击图片放大,摁住Alt键单击图片缩小 2、抓手工具:用于查看放大图片的各个位置(摁住...

网友评论

      本文标题:点击图片放大缩小(遮罩)

      本文链接:https://www.haomeiwen.com/subject/uvtdsltx.html