图片预览（原生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();}
};

具体实现细节代码已注释，想要使用的只需修改一下图片地址即可，注意css和js的路径地址
我的目录结构

图片预览（原生js实现）相关推荐

原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
原生js之图片预览的封装
图片预览 _this:input[file]对象 _thisNext:下一个要操作的dom对象 cb:回调函数 function changeImg(_this,_thisNext,cb){var r ...
浅谈js本地图片预览
最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...
简单的实现图片预览, 通过原生ajax以及 jQuery两种方法实现图片预览,有更好的办法可以留言喔...................
1.原生写ajax实现图片预览: 结构: <input type="file"> <img src="" alt="&q ...
原生图片预览实现及由此引出的图片自适应宽高问题探索
看到手机相册,突发奇想:能不能用实现一个原生的页面"相册"?或者说,传统网页中怎么实现图片预览功能? 如果在原生网页中使用插件,那必不可少的要引入一堆东西(并不是鄙视插件,只是为了 ...
php 图片预览原理,JavaScript_纯JS实现的批量图片预览加载功能，1.实现原理直接见代码,需要一 - phpStudy...
纯JS实现的批量图片预览加载功能 1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果复制代码代码 ...
js实现移动端图片预览：手势缩放，手势拖动，双击放大...
原文:js实现移动端图片预览:手势缩放, 手势拖动,双击放大... 前言本文将介绍如何通过js实现移动端图片预览,包括图片的预览模式,手势缩放,手势拖动,双击放大等基本功能: 扫码查看示例效果: ...
JS实现图片预览与等比缩放
案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...
axios获取图片显示_Vue.js+axios图片预览以及上传显示进度
在平时项目开发中,我们经常会对文件做一些上传操作,不仅仅要实现基本需求,也要兼顾用户体验,根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化. 1.搭建项目基于Vue.js+axios ...

图片预览（原生js实现）

功能描述

效果图

具体代码实现

图片预览（原生js实现）相关推荐

最新文章

热门文章