使用layer弹框：实现点击图片查看原图的效果；
引入layer，函数封装：
// 点击图片查看大图function showBigImage(e) {let src = $(e).attr('src');let img = new Image();img.src = src;let w = img.width;let h = img.height;let windowW = window.screen.availWidth;let windowH = window.screen.availHeight;let width,height,imgArea;width = windowW * 0.7 + 'px';height = windowH + 'px';if(w >= h){imgArea = 'width:' + windowW * 0.7 + 'px';}else if(w < h){imgArea = 'height:' + windowH * 0.9 + 'px';}layui.use(['layer'], function () {var layer = layui.layer;var imgLayer;if (parent.layer) {imgLayer = parent.layer;} else {imgLayer = layer;}imgLayer.open({type: 1,title: false,closeBtn: 1,shadeClose: true, //点击阴影关闭area: [ width,height ], //宽高content: `<img style="${imgArea};margin:0 auto;display:block;" src="${src}" οnclick='xz()' class="big-img" title="点击图片旋转"/><script type="text/javascript">let d = 0function xz(){d -= 90$('img.big-img').css('transform','rotate('+d+'deg)')}</script>`});});}
函数调用：
<img onclick="showImage(this);" src="/xxx/xxx" alt="">
如果觉得《点击图片查看原图（图片按比例展示 点击旋转）》对你有帮助，请点赞、收藏，并留下你的观点哦！
