图片预览（原生js实现）

孤独的冥王星

已于 2022-09-02 16:11:08 修改

阅读量5k

点赞数 5

分类专栏： # webUI 文章标签： javascript css 前端图片预览

于 2022-05-01 15:17:03 首次发布

本文链接：https://blog.csdn.net/zyw0101/article/details/124526837

版权

webUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

功能描述

很多网站都是使用浏览器自带图片浏览功能，但看起来很low，想手动实现图片预览功能，点击图片弹出大图预览框在屏幕中间显示，根据图片宽高自适应屏幕大小

效果图

具体代码实现

页面preview.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>preview</title>
     <!-- 加载css样式 -->
     <link rel="stylesheet" href="../css/preview.css">

</head>
<body>
    <!-- 图片列表 -->
    <div>
        <a href="javascript:;" onclick="showPreviewImg('../images/t1.jpg')">
            <img src="../images/t1.jpg" alt="" width="100px" height="100px">
        </a>
        <a href="javascript:;" onclick="showPreviewImg('../images/t2.jpg')">
            <img src="../images/t2.jpg" alt="" width="100px" height="100px">
        </a>
        <a href="javascript:;" onclick="showPreviewImg('../images/t3.jpg')">
            <img src="../images/t3.jpg" alt="" width="100px" height="100px">
        </a>
    </div>

    <!-- 预览图 -->
    <div class="preview-img">
        <div class="container">
            <!-- 显示的大图 -->
            <img src="../images/preview_default.png" alt="">
            <!-- 关闭按钮 -->
            <a class="close" href="javascript:void(0);"></a>
        </div>
    </div>

    <!-- 引入js -->
    <script src="../js/preview.js"></script>
</body>
</html>

样式preview.css

/* 预览图 */
.preview-img {
    display: none;
    text-align: center;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    background: url("../images/fancybox_overlay.png");
}

/* 容器 */
.preview-img .container {
    max-width: 90%;
    position: absolute;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

/* 大图显示 */
.preview-img .container img {
    max-width: 100%;
    background-size: contain/cover;
}

/* 关闭按钮 */
.preview-img .container a {
    display: inline-block;
    width: 36px;
    height: 36px;
    text-decoration: none;
    position: absolute;
    right: -18px;
    top: -18px;
    background: url("../images/fancybox_sprite.png") no-repeat;
}

preview.js

var mBody = document.querySelector("body");// 获取body
var previewImg = document.querySelector(".preview-img");// 获取预览图
var mContainer = document.querySelector(".preview-img .container");// 获取预览图显示区域
var mImg = document.querySelector(".preview-img .container img");// 获取显示图片
var mClose = document.querySelector(".preview-img .container .close");// 获取关闭按钮

// 显示预览图
function showPreviewImg(url) {
    // 设置图片路径
    mImg.setAttribute("src", url);
    // 设置为弹性布局
    previewImg.style.display = "flex";
    previewImg.style.justifyContent = "center";
    previewImg.style.alignItems = "center";
    // 设置预览图大小
    setPreviewImgWH();
    // 当弹出预览图时下面不允许滚动
    mBody.style.overflow = "hidden"
}

// 设置预览图大小
function setPreviewImgWH() {

    // 获取当前窗口宽度
    let windowWidth = window.innerWidth;
    // 获取当前窗口高度
    let windowHeight = window.innerHeight;
    // 判断当宽度小于高度时，使用宽度
    if (windowWidth < windowHeight) {
        // 设置图片宽高
        mImg.style.width = windowWidth * 0.8 + "px";
        mImg.style.height = "auto";
    } else {
        // 设置图片宽高
        mImg.style.height = windowHeight * 0.8 + "px";
        mImg.style.width = "auto";
    }
}

// 关闭按钮点击事件
mClose.onclick = function () {
    closePreviewImg();
}

// 预览图上点击事件取消冒泡
mContainer.onclick = function (event) {
    event.stopPropagation();
}

// 点击预览图之外的地方 关闭预览图
previewImg.onclick = function (event) {
    closePreviewImg();
}

// 关闭预览图
function closePreviewImg() {
    previewImg.style.display = "none";
    mBody.style.overflow = "scroll"
}

// 屏幕尺寸改变事件
window.onresize = function () {
    // 判断只有预览图显示的时候才设置大小
    if (previewImg.style.display != "none") {
        // 设置预览图大小
        setPreviewImgWH();
    }
};