layui的layer.open()方法查看縮略圖 原圖縮放

寫在前面

 

需求是頁面上的圖片縮略圖, 鼠標懸浮時顯示原圖片, 並按比例縮放.

 

操作步驟

 

官方文檔

點擊跳轉

關鍵屬性

1. type: 設置type=1, 以頁面的形式展示圖片

2.  content: 設置content即頁面中的內容

 

3. offset: 設置頁面(圖片)的展示坐標

 

4. area: 設置展示區域寬高 auto-自適應

 

看到這里, 可以聯想到將type設置為1-頁面, content設置成<img>標簽然后把圖片src傳進來就可以展示圖片了.

接下來是設置圖片顯示的坐標(offset屬性), 以及圖片展示區域大小(area屬性), 圖片的寬高其實可以在<img>標簽中動態拼接.

 

關鍵代碼

// 瀏覽器窗口width height均/4 設置為圖片展示的左上角坐標
var x = document.documentElement.clientWidth/4;
var y = document.documentElement.clientHeight/4;
// 圖片的src
var src = obj.src;

// 圖片寬高/3 即縮放為原圖片大小的1/3
var width = obj.naturalWidth/3;
var height = obj.naturalHeight/3;

// 拼接img標簽 設置width height src屬性值
var img_show = "<img width='" + width + "' height='" + height + "' border='0' src='" + src + "' />";
bigImgIndex = layer.open({
    content:img_show,
    type:1,
    offset:[y+"px",x+"px"],
    title:false,
    area:['auto','auto'],
    shade:0,
    closeBtn:0
});

 

實際代碼

/*
 * 鼠標放在圖片上方，顯示大圖
 */
var bigImgIndex = null;
function tipImg(obj,level){
    try{
        var navigatorName = "Microsoft Internet Explorer"; 
        if( navigator.appName != navigatorName ){ 
            if(obj.nodeName == 'IMG'){
                var e = window.event;
                // var x = e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft
                // var y = e.clientY+document.body.scrollTop + document.documentElement.scrollTop
                var x = document.documentElement.clientWidth/4;
                var y = document.documentElement.clientHeight/4;
                var src = obj.src;
                // var width = obj.naturalWidth;
                // var height = obj.naturalHeight;
                var width = obj.naturalWidth/3;
                var height = obj.naturalHeight/3;
                var curlayer;
                if(!level){
                    curlayer = layer;
                }else if(level==1){
                    curlayer = parent.layer;
                }

                var img_infor = "<img width='" + width + "' height='" + height + "' border='0' src='" + src + "' />";
                bigImgIndex = curlayer.open({
                    // content:[src,'no'],
                    content:img_infor,
                    // type:2,
                    type:1,
                    offset:[y+"px",x+"px"],
                    title:false,
                    // area:[width+"px",height+"px"],
                    area:['auto','auto'],
                    shade:0,
                    closeBtn:0
                });
                
            }
        }
    }catch(e){
    }
    
}

 

效果圖

個性化 

 

以上只是個人修改的結果, 需求不一樣的可以作相應調整, 不再贅述了.

 

感謝

 

• http://layer.layui.com/api.html#area

• https://blog.csdn.net/sdiudui/article/details/80424539