简单实现图片预览功能

最新推荐文章于 2024-05-16 11:32:42 发布

五花漏

最新推荐文章于 2024-05-16 11:32:42 发布

阅读量987

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_37024887/article/details/121471330

版权

<!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>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    .imgDolage {
        width: 100%;
        height: 100%;
        background: rgba(000, 000, 000, .7);
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 12;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: auto;
    }

    .imagesBody {
        border: 5px solid #fff;
        cursor: pointer;
        height: 90%;
    }

    .dis {
        display: none !important;
    }

    .img-small {
        width: 300px;
        height: 180px;
        border: 5px solid #333;
    }
</style>

<body>
    <img class="img-small" src="https://cn.vuejs.org/images/logo.svg" onclick="imgShow()">
    <div class="imgDolage dis">
        <img class="imagesBody" src="" alt="">
    </div>
</body>
<script>
    function imgShow() {
        // 总是指向事件绑定的元素，而 Event.target 则是事件触发的元素。
        var is = event.currentTarget
        $('.imgDolage').removeClass('dis')
        $('.imgDolage img').attr('src', is.getAttribute('src'))
    }
	let ActiveImages = false
    $(".imgDolage").click(function (e) {
        let _con = $('.imagesBody');   // 设置目标区域
        if (!_con.is(e.target) && _con.has(e.target).length === 0) {
            // 点击图片之外的区域，收起预览
            $('.imgDolage').addClass('dis')
            ActiveImages = false
        } else {
            // 点击图片：放大缩小
            if (ActiveImages) {
                _con.css('top', '5%')
                _con.css('height', '90%')
                ActiveImages = false
            } else {
                _con.css('top', '0%')
                _con.css('height', 'auto')
                ActiveImages = true
            }
        }
    });
</script>
</html>

点击左上角小图

点击左上角小图可以打开预览弹窗，点击预览弹窗中的图片可以进一步放大，再次点击缩小回初始大小。点击图片以外遮罩层区域关闭预览弹窗。

五花漏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
7
评论
简单实现图片预览功能

<!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>简单
复制链接

扫一扫