图片预览（原生js实现）

功能描述

很多网站都是使用浏览器自带图片浏览功能，但看起来很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();}
};