一、
html 代碼
<td> <img class="layui-upload-img" onclick="previewImg(this)" src="{$familyDoctor.logo}" /></td>
js 代碼 圖片原始大小
<script>
function previewImg(obj) {
var img = new Image();
img.src = obj.src;
var height = img.height + 50; //獲取圖片高度
var width = img.width; //獲取圖片寬度
var imgHtml = "<img src='" + obj.src + "' />";
//彈出層
layer.open({
type: 1,
shade: 0.8,
offset: 'auto',
area: [width + 'px',height+'px'],
shadeClose:true,//點擊外圍關閉彈窗
scrollbar: false,//不現實滾動條
title: "圖片預覽", //不顯示標題
content: imgHtml, //捕獲的元素,注意:最好該指定的元素要存放在body最外層,否則可能被其它的相對元素所影響
cancel: function () {
//layer.msg('捕獲就是從頁面已經存在的元素上,包裹layer的結構', { time: 5000, icon: 6 });
}
});
}
</script>
js 代碼 圖片固定大小
function previewImg(obj) {
var img = new Image();
img.src = obj.src;
var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";
//彈出層
layer.open({
type: 1,
shade: 0.8,
offset: 'auto',
area: [500 + 'px',550+'px'],
shadeClose:true,
scrollbar: false,
title: "圖片預覽", //不顯示標題
content: imgHtml, //捕獲的元素,注意:最好該指定的元素要存放在body最外層,否則可能被其它的相對元素所影響
cancel: function () {
//layer.msg('捕獲就是從頁面已經存在的元素上,包裹layer的結構', { time: 5000, icon: 6 });
}
});
}
二、
html代碼
<td id="x-img"> <img class="layui-upload-img" src="/uploads/{$familyDoctor.logo}" style="width: 40px; height: 40px; border-radius: 4px;" /></td>
js代碼
layui.use(['laydate','element','laypage','layer'], function() {
$ = layui.jquery;//jquery
laydate = layui.laydate;//日期插件
lement = layui.element();//麪包導航
laypage = layui.laypage;//分頁
layer = layui.layer;//彈出層
layer.ready(function(){ //爲了layer.ext.js加載完畢再執行
layer.photos({
photos: '#x-img'
,shift: 5 //0-6的選擇,指定彈出圖片動畫類型,默認隨機
});
});
});