layui绛夋瘮渚嬫斁澶?缂╁皬鍥剧墖

Posted 2022-04-28

鏍囩锛?a href='http://www.mamicode.com/so/1/%e6%af%94%e4%be%8b%e5%b0%ba' title='姣斾緥灏?>姣斾緥灏?/a>   bar   load   鏀惧ぇ   鏍囧噯   ade   鎸囧畾   

html

<img class="layui-upload-img" id="photo" style="max-height: 100px;max-width: 100px;">

JS

$("#photo").click(function()
    showImg($(this));
);

function showImg(imgData)
       var img = new Image();  
       img.src = imgData.attr("src");
       var height = img.height; // 鍘熷浘鐗囧ぇ灏?       var width = img.width; //鍘熷浘鐗囧ぇ灏?
       var winHeight = $(window).height() - 80;  // 娴忚鍣ㄥ彲瑙嗛儴鍒嗛珮搴?       var winWidth = $(window).width() - 100;  // 娴忚鍣ㄥ彲瑙嗛儴鍒嗗搴?
       // 濡傛灉鍥剧墖楂樺害鎴栬€呭搴﹀ぇ浜庨檺瀹氱殑楂樺害鎴栬€呭搴﹀垯杩涜绛夋瘮渚嬪昂瀵稿帇缂?       if (height > winHeight || width > winWidth) 
        // 1.鍘熷浘鐗囧楂樻瘮渚?澶т簬绛変簬 鍥剧墖妗嗗楂樻瘮渚?        if (winWidth/ winHeight <= width / height) 
            width = winWidth;   //浠ユ鐨勫搴︿负鏍囧噯
            height = winWidth * (height / width);
        

        // 2.鍘熷浘鐗囧楂樻瘮渚?灏忎簬 鍥剧墖妗嗗楂樻瘮渚?        if (winWidth/ winHeight > width / height) 
            width = winHeight  * (width / height);
            height = winHeight  ;   //浠ユ鐨勯珮搴︿负鏍囧噯
        
       

       var imgHtml = "<img src=鈥? + img.src + "鈥?width=鈥? + width + "px鈥?height=鈥? + height + "px鈥?/>";  
       //寮瑰嚭灞?       layer.open(
           type: 1,
           shade: 0.8,
           offset: 鈥榓uto鈥?
           // area: [500 + 鈥榩x鈥?550+鈥榩x鈥榏,
           area: [width + 鈥榩x鈥?(height + 50) + 鈥榩x鈥榏,  //鍘熷浘鏄剧ず,楂樺害+50鏄负浜嗗幓闄ゆ帀婊氬姩鏉?           shadeClose:true,
           scrollbar: false,
           title: "鍥剧墖棰勮", //涓嶆樉绀烘爣棰? 
           content: imgHtml, //鎹曡幏鐨勫厓绱狅紝娉ㄦ剰锛氭渶濂借鎸囧畾鐨勫厓绱犺瀛樻斁鍦╞ody鏈€澶栧眰锛屽惁鍒欏彲鑳借鍏跺畠鐨勭浉瀵瑰厓绱犳墍褰卞搷  
           cancel: function ()   
               //layer.msg(鈥樻崟鑾峰氨鏄粠椤甸潰宸茬粡瀛樺湪鐨勫厓绱犱笂锛屽寘瑁筶ayer鐨勭粨鏋勨€?  time: 5000, icon: 6 );  
             
       );