B/S端经常需要显示图片,图片有时候,需要预览放大,实现的方法,挺多的,比如鼠标点击放大,比如鼠标悬浮放大等,
最近看到LayUI下,可以直接给img绑定onclick时间,可以在事件中打开一个弹窗显示图片,觉得还挺方便,记录以供后面使用. 该方式是通过点击事件后,在方法中实现,感觉后续也可以改成鼠标悬浮的响应事件吧.
过程:
(1)img标签 中需要增加绑定事件:οnclick=\"previewImg(this)\"
dr["照片"] = "<img onclick=\"previewImg(this)\" style='width:40px;height:40px;cursor:pointer;' src='" + filename1 + "'>";
Tips:这是后端动态构建代码,主要任务是给一个获取数据的url,可以根据情况自己改变,只要img标签中onclick事件绑定好就好了.
(2)在对应页面的JS中实现绑定的onclick事件:原图大小预览
<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 + "' width='100%' height='100%'/>";
//弹出层
layer.open({
type: 1,
shade: 0.8,
offset: 'auto',
area: [height + 'px', width + 'px'],
shadeClose: true,
scrollbar: false,
title: "用餐图片预览", //不显示标题
content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
cancel: function () {
//layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });
}
});
}
</script>
当然,可以自己自己指定弹窗大小,只是改成height,width给一个具体而已即可,可参考
function previewImg(obj) { var img = new Image(); img.src = obj.src; var imgHtml = "<img src='" + obj.src + "' width='100%' height='100%'/>"; //弹出层 layer.open({ type: 1, shade: 0.8, offset: 'auto', area: [600 + 'px',300+'px'], shadeClose:true, scrollbar: false, title: "图片预览", //不显示标题 content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响 cancel: function () { //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 }); } }); }
参考:https://www.php.cn/blog/detail/10130.html