1. 程式人生 > >jQuery外掛layer擴充套件:解決大圖顯示時,圖片的比例問題

jQuery外掛layer擴充套件:解決大圖顯示時,圖片的比例問題

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。