jQuery插件layer扩展：解决大图显示时，图片的比例问题

来源：互联网发布：淘宝买药暗语编辑：程序博客网时间：2024/06/01 09:24

代码详见：https://github.com/EmilyQiRabbit/layerExtension

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。

0 0