JQuery - 实现点击图片放大预览效果，预览时自动显示黑色遮罩层并且点击时关闭图片预览（详细示例一键复制运行）

最新推荐文章于 2023-06-26 15:29:07 发布

王佳斌

最新推荐文章于 2023-06-26 15:29:07 发布

阅读量895

点赞数 2

分类专栏： + JQuery 文章标签： jquery html图片预览图片点击预览 js图片点击预览 jq图像点击放大

本文链接：https://blog.csdn.net/weixin_44198965/article/details/130606973

版权

+ JQuery 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

前言

网上关于 JQuery 放大图片预览功能写的都很复杂，本文用最少的代码进行实现。

如下图所示，点击图片时触发预览（同时背景显示遮罩层），点击外侧时关闭预览。

在这里插入图片描述

完整源码

JQuery CDN 可能随时失效，如失效请自行替换。

新建一个 *.html 文件，一键复制以下代码运行即可。

<!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>JQ图片预览</title>

    <!-- JQuery CDN(失效自行更换引入) -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <!-- 样式 -->
    <style >
        .small {
            width: 150px;
            height: 150px;
        }

        .big {
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, .6);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
            display: none;
        }

        .big_img {
            width: auto;
            height: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
        }
    </style>
    <!-- END -->
</head>
<body>

<!-- 小图 -->
<img class="small" src="https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500">
<img class="small" src="https://img1.baidu.com/it/u=3605832793,3252065221&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422">
<!-- END -->

<!-- 大图div -->
<div class="big">
    <img class="big_img" src="">
</div>
<!-- END -->

<script>
// 小图点击放大
$("img").click(function() {
    // 获取当前点击小图的src
    let imgSrc = $(this).attr("src");
    // 将获取到的src赋值到大图显示区域img的src里
    $(".big_img").attr("src", imgSrc);
    // 显示大图区域
    $(".big").show();
})

// 隐藏大图显示区域
$(".big").click(function() {
    $(this).hide();
})
</script>


</body>
</html>

王佳斌

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery - 实现点击图片放大预览效果，预览时自动显示黑色遮罩层并且点击时关闭图片预览（详细示例一键复制运行）

jquery 图片点击放大预览，jquery点击图片放大，jq实现图片点击放大(预览)效果，jQuery点击图片弹出放大预览，jquery实现图片放大预览效果，jQuery图片放大预览，jQuery+css实现的点击图片放大缩小预览功能示例，jQuery图片局部放大预览插件，jQuery图片放大插件，jquery 图片点击放大预览，jQuery实现图片预览大图效果，jquery手机端图片放大，jquery图片放大缩小，jquery 图像预览，jquery图片预览插件，jquery 点击放大图片预览
复制链接

扫一扫