前言
預覽圖片是一個很常用的業務功能，比如掘金的預覽圖片功能，下面我們就來模擬實現一個類似掘金的簡單預覽圖片功能（PS:最終實現動畫效果不如掘金，可自行擴充套件，還有就是巢狀的元素與掘金的方式也有區別）。
建立一個建構函式
首先新建一個js檔案，命名為viewer.js,然後在這個js檔案中，我們來建立一個函式，命名為ewViewer。然後引數是一個圖片元素，可以是jquery的圖片元素，也可以是js dom圖片元素，我們做一個判斷然後分別呼叫不同的實現方法，如下所示:
function ewViewer(el){
//判斷頁面內容是否存在jquery並且傳入的el元素是否是一個jquerydom雲阿蘇
if(typeof window.jQuery !== 'undefined' && el instanceof window.jQuery){
this.previewjQuery(el);
}else{
this.previewJS(el);
}
return this;
}
複製程式碼實現js的預覽圖
實現的思路就是放置兩個元素，第一個是遮罩層元素，並且設定相關的樣式，子元素就是存放圖片的元素，我們通過設定子元素的background-image屬性來顯示圖片，程式碼如下(每一步的註釋都解釋了):
ewViewer.prototype.previewJS = function(el){
const isDom = function(e){
return typeof HTMLElement === 'object' ? e instanceof HTMLElement : e && typeof e === 'object' && e.nodeType === 1 && typeof e.nodeName === 'string' || e instanceof HTMLCollection || e instanceof NodeList;
}
// 如果傳入的不是一個dom元素則不執行後續程式碼
if(!isDom(el))return;
const curElement = document.querySelector('#preview-img-mask');
// 判斷當前遮罩層元素是否存在
if(!curElement){
// 建立遮罩層元素
const element = document.createElement('div');
// 克隆一個節點
const child = element.cloneNode(true);
element.id = "preview-img-mask";
// 新增遮罩層元素樣式
element.style.cssText += `position:fixed;left:0;top:0;right:0;display:none;z-index:10000;overflow:auto;width:100%;height:100%;background:rgba(0,0,0,0.5)`;
// 子元素新增樣式
child.style.cssText += `background-repeat: no-repeat;background-position: center;background-size: contain;`;
element.appendChild(child);
document.body.appendChild(element);
}
// 重新獲取遮罩層元素
const maskLayer = document.querySelector('#preview-img-mask');
// 判斷如果傳入的元素不是一個圖片元素則不執行如下程式碼
if (el.length || el.tagName.toLowerCase().indexOf('img') === -1)return;
// 獲取圖片的原始寬高
var imgNaturalWidth = el.naturalWidth,
imgNaturalHeight = el.naturalHeight;
// 移動端以及頁面縮放做判斷
const isMobile = window.navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i);
// 獲取頁面寬度
const pageWidth = (function(){
return window.innerWidth;
})();
// 如果當前頁面寬度小於600,或是移動端裝置，則將原始寬高縮放0.6倍
if (isMobile || pageWidth <= 600) {
imgNaturalWidth = imgNaturalWidth * 0.6;
imgNaturalHeight = imgNaturalHeight * 0.6;
}
// 獲取頁面寬高
var viewportWidth = window.innerWidth,
viewportHeight = window.innerHeight;
// 獲取圖片元素的src路徑
var imgUrl = el.getAttribute('src');
// 顯示遮罩層
setTimeout(() => {
maskLayer.style.display = "block";
},600);
// 獲取遮罩層的子元素
var maskLayerDiv = maskLayer.querySelector('div');
// 設定子元素的樣式
maskLayerDiv.style.cssText += `background-image:url('${imgUrl}');background-size:${imgNaturalWidth}px ${imgNaturalHeight}px;width:0;height:0;`;
// 判斷圖片寬度是否大於頁面寬度,然後設定子元素的寬度
if (imgNaturalWidth > viewportWidth) {
maskLayerDiv.style.width = imgNaturalWidth + "px";
} else {
maskLayerDiv.style.width = "100%";
}
// 判斷圖片高度是否大於頁面高度，然後設定子元素的高度
if (imgNaturalHeight > viewportHeight) {
maskLayerDiv.style.height = imgNaturalHeight + "px";
} else {
maskLayerDiv.style.height = "100%";
}
// 點選遮罩層關閉預覽
maskLayer.onclick = function(){
setTimeout(() => {
this.style.display = 'none';
},600);
}
}
複製程式碼實現jquery版
實現思路類似js版本，只不過是有些程式碼做了變換而已。
ewViewer.prototype.previewjQuery = function(el){
const curElement = $('#preview-img-mask');
// 判斷如果頁面不存在遮罩層元素，則新增該元素
if (!curElement.length) {
$(`<div id="preview-img-mask"><div></div></div>`).appendTo("body");
}
// 獲取遮罩層元素
var maskLayer = $('#preview-img-mask');
// 設定遮罩層樣式
maskLayer.css({
position:'fixed',
left:0,
top:0,
right:0,
display:'none',
'z-index':10000,
overflow:'auto',
width:'100%',
height:'100%',
background:'rgba(0,0,0,0.5)'
});
// 判斷傳入的如果不是一個img元素
if (el.prop('tagName').toLowerCase().indexOf('img') === -1)return;
var imgNaturalWidth = el[0].naturalWidth,
imgNaturalHeight = el[0].naturalHeight;
// 移動端以及頁面縮放做判斷
const isMobile = window.navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i);
// 獲取頁面寬度
const pageWidth = (function(){
return $(window).width();
})();
// 判斷頁面寬度是否小於600以及是否是移動端
if (isMobile || pageWidth <= 600) {
imgNaturalWidth = imgNaturalWidth * 0.6;
imgNaturalHeight = imgNaturalHeight * 0.6;
}
// 獲取頁面的寬高
var viewportWidth = $(window).width(),
viewportHeight = $(window).height();
// 獲取圖片的路徑
var imgUrl = el.attr('src');
maskLayer.fadeIn(600);
// 獲取子元素
var maskLayerDiv = maskLayer.children();
// 設定子元素樣式
maskLayerDiv.css({
"background-image": "url(" + imgUrl + ")",
"background-size": imgNaturalWidth + "px " + imgNaturalHeight + "px",
"width": "",
"height": "",
"background-repeat": "no-repeat",
"background-position": "center",
"background-size": "contain"
});
// 判斷圖片原始寬高與頁面寬高，從而決定子元素的寬高
if (imgNaturalWidth > viewportWidth) {
maskLayerDiv.css('width', imgNaturalWidth);
} else {
maskLayerDiv.css('width', '100%');
}
if (imgNaturalHeight > viewportHeight) {
maskLayerDiv.css('height', imgNaturalHeight);
} else {
maskLayerDiv.css('height', '100%');
}
// 點選遮罩層關閉
maskLayer.off("click").on("click", function () {
$(this).fadeOut(600);
});
}
複製程式碼呼叫方式
而且我們還做了判斷，在移動端裝置以及頁面寬度小於600px的時候，我們將按照原圖的寬高比例縮放0.6倍顯示。呼叫方式也很簡單，如以下一個示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>預覽圖</title>
</head>
<body>
<img src="/static/image/1.jpg" alt="">
<img src="/static/image/1.jpg" alt="">
</body>
<script src="./viewer.js"></script>
<script src="./static/plugin/jquery.min.js"></script>
<script>
//js方式呼叫程式碼如下:
// let imgElements = document.querySelectorAll('img');
// [].slice.call(imgElements).forEach((img) => {
// img.onclick = function(){
// const viewer = new ewViewer(this);
// console.log(viewer);
// }
// });
//jquery呼叫方式程式碼如下
$('img').click(function(){
const viewer = new ewViewer($(this));
console.log(viewer);
});
</script>
</html>
複製程式碼最後
這只是實現簡單預覽圖的第一步，如果可以，還可以在這上面擴充套件，進而實現viewer.js那樣的預覽圖片庫了。不過本文旨在介紹簡單的預覽功能，後續就不贅述了。