LOGO

写bug的代码人的博客

JavaScript实现图片预览

前两天逛我的网站的时候，突然间发现了一个问题，我的网站不支持图片预览（就是点击图片后放大）

为了解决这一问题，我就开始在网上寻找教程（By the way，JavaScript可真不好学)，W3School提供了一种叫做图像模态的方法来实现，但是无法支持多张图片。最终在csdn网找到了一个教程，链接 点击访问。这篇文章就是根据以上链接中的代码经过修改写成的。

HTML代码如下

<a href="javascript:;" onclick="showPreviewImg('https://www.w3school.com.cn/i/photo/tulip.jpg');ShowDescription('郁金香')">
    <img src="https://www.w3school.com.cn/i/photo/tulip.jpg" alt="郁金香" width=100% height=auto>
</a>
<a href="javascript:;" onclick="showPreviewImg('https://www.w3school.com.cn/i/photo/tiyugongyuan.jpg');ShowDescription('绿茵场')">
    <img src="https://www.w3school.com.cn/i/photo/tiyugongyuan.jpg" alt="绿茵场" width=100% height=auto>
</a>
    
<!-- 预览图 -->
<div class="preview-img">
    <div class="container">
        <!-- 显示的大图 -->
        <img src="">
        <!-- 关闭按钮 -->
        <h1><a class="close" href="javascript:void(0);">×</a></h1>
        <!-- 图片描述 -->
        <p id="captain">暂无图片描述</p> 
    </div>   
</div>

CSS代码如下

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

/* 容器 */
.preview-img .container {
    max-width: 100%;
    position: absolute;
    padding: 1px;
    background-color: #fafafa;   
}

/* 大图显示 */
.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: 0px;
    top: 0px;
    font-family: Arial;
    color: #fafafa;
}

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");// 获取关闭按钮
var mDescription = document.getElementById("captain");// 获取图片描述

// 显示图片描述
function ShowDescription(str){

    // 更改描述
    mDescription.innerHTML = str;
}

// 显示预览图
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();
    }
};

最终代码如下

<!DOCTYPE html>
<html>
<head>
<title>预览图片</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

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

/* 容器 */
.preview-img .container {
    max-width: 100%;
    position: absolute;
    padding: 1px;
    background-color: #fafafa;   
}

/* 大图显示 */
.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: 0px;
    top: 0px;
    font-family: Arial;
    color: #fafafa;
}

</style>
</head>
<body>
    
<a href="javascript:;" onclick="showPreviewImg('https://www.w3school.com.cn/i/photo/tulip.jpg');ShowDescription('郁金香')">
    <img src="https://www.w3school.com.cn/i/photo/tulip.jpg" alt="郁金香" width=100% height=auto>
</a>
<a href="javascript:;" onclick="showPreviewImg('https://www.w3school.com.cn/i/photo/tiyugongyuan.jpg');ShowDescription('绿茵场')">
    <img src="https://www.w3school.com.cn/i/photo/tiyugongyuan.jpg" alt="绿茵场" width=100% height=auto>
</a>
    
<!-- 预览图 -->
<div class="preview-img">
    <div class="container">
        <!-- 显示的大图 -->
        <img src="">
        <!-- 关闭按钮 -->
        <h1><a class="close" href="javascript:void(0);">×</a></h1>
        <!-- 图片描述 -->
        <p id="captain">暂无图片描述</p> 
    </div>   
</div>
    
<script type="text/javascript">


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");// 获取关闭按钮
var mDescription = document.getElementById("captain");// 获取图片描述

// 显示图片描述
function ShowDescription(str){

    // 更改描述
    mDescription.innerHTML = str;
}

// 显示预览图
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();
    }
};

</script>
</body>
</html>

效果如下（我新添加了图片描述）

也可访问simple1 图片预览效果图

 

Posted 2022-12-31 15:47 写bug的代码人

本文标签：

本文总阅读量?次

文章作者   写bug的代码人

文章链接   https://bugcoder.asia/article/003.html

声明   本博客中的所有文章均使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权，所有代码均使用MIT开源协议

 

Copyright © 2024 写bug的代码人

Developed by 写bug的代码人

萌ICP备20230914号

Written by Human, Not by AI   MySSL安全认证

开往-友链接力