HTML

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; // 瀏覽器可視部分寬度

// 如果圖片高度或者寬度大于限定的高度或者寬度則進(jìn)行等比例尺寸壓縮

if (height > winHeight || width > winWidth) {

// 1.原圖片寬高比例 大于等于 圖片框?qū)捀弑壤?/p>

if (winWidth/ winHeight <= width / height) {

width = winWidth; //以框的寬度為標(biāo)準(zhǔn)

height = winWidth * (height / width);

}

// 2.原圖片寬高比例 小于 圖片框?qū)捀弑壤?/p>

if (winWidth/ winHeight > width / height) {

width = winHeight * (width / height);

height = winHeight ; //以框的高度為標(biāo)準(zhǔn)

}

}

var imgHtml = "";

//彈出層

layer.open({

type: 1,

shade: 0.8,

offset: 'auto',

// area: [500 + 'px',550+'px'],

area: [width + 'px',(height + 50) + 'px'], //原圖顯示,高度+50是為了去除掉滾動(dòng)條

shadeClose:true,

scrollbar: false,

title: "圖片預(yù)覽", //不顯示標(biāo)題

content: imgHtml, //捕獲的元素，注意：最好該指定的元素要存放在body最外層，否則可能被其它的相對(duì)元素所影響

cancel: function () {

//layer.msg('捕獲就是從頁(yè)面已經(jīng)存在的元素上，包裹layer的結(jié)構(gòu)', { time: 5000, icon: 6 });

}

});

}

總結(jié)

以上是生活随笔為你收集整理的layui 怎么设置点击图片放大_layui等比例放大/缩小图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。