功能描述
很多网站都是使用浏览器自带图片浏览功能，但看起来很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();
}
};
具体实现细节代码已注释，想要使用的只需修改一下图片地址即可，注意css和js的路径地址
我的目录结构
