jQuery外掛layer擴充套件:解決大圖顯示時,圖片的比例問題
阿新 • • 發佈:2019-01-26
html核心:
<div class="carimgtd">
<div style="height:200px">
<img src="img/testH.jpg" alt="測試高圖片">
</div>
<button class="btn btn-blue imgviewerbutton">檢視大圖</button>
</div>
js核心:
function getImageWidth(url,callback){
var img = new Image();
img.src = url;
// 如果圖片被快取,則直接返回快取資料
if(img.complete){
callback(img.width, img.height);
}else{
// 完全載入完畢的事件
img.onload = function(){
callback(img.width, img.height);
}
}
}
$(document).ready(function(){
$(".imgviewerbutton").click(function(){
//console.log("click");
// 獲取元素
var jqthis = $(this);
var theimg = $(this).siblings().find('img');
var url = theimg.attr("src");
// 新建圖片
var imgcontent = $('<img src="'+url+'" class="imgviewer" style="display:none">');
$(this).siblings().append(imgcontent);
var setting = {
type: 1 ,
title: false,
closeBtn: 0,
skin: 'layui-layer-nobg', //沒有背景色
shadeClose: true,
shade: 0.6, //遮罩透明度
content: imgcontent
}
var windowH = $(window).height();
var windowW = $(window).width();
getImageWidth(url,function(w,h){
//console.log("win:"+windowH+","+windowW);
//console.log("img:"+h+","+w);
// 調整圖片大小
if(w>windowW || h>windowH){
if(w>windowW && h>windowH){
w = theimg.width()*3;
h = theimg.height()*3;
setting.area = [w+"px",h+"px"];
//console.log(w+","+h);
}else if(w>windowW){
setting.area = [windowW*0.5+"px",windowW*0.5/w*h+"px"];
}else{
setting.area = [windowH*0.5/h*w+"px",windowH*0.5+"px"];
}
//console.log(setting.area);
}else{
setting.area = [w+"px",h+"px"];
}
// 設定layer
layer.open(setting);
});
})
})
思路解釋:layer的setting中有一個屬性為area,可以設定大圖顯示時的高和寬。
但是我們插入的圖片高寬未定,所以需要程式碼來根據圖片的大小、比例以及當前瀏覽器的寬高,來設定area。