layer点击小图预览图片

柔情只为你懂 2023-07-13 13:55 20阅读 0赞

html代码：

<div id="window-img" style="display: none"></div>

封装一个函数

function windowImg(imgUrl) { 
    	$('#window-img').empty();
    	var img = "<img class='window-img' src='" + imgUrl + "' width='100%' />";
    	$('#window-img').append(img);
    
    	layer.open({ 
    		type: 1,
    		title: false,
    		//resize:false,
    		shadeClose: true, //点击遮罩关闭
    		content: $('#window-img'),
    		area: 'auto',
    		maxWidth: 600,
    		cancel: function() { 
    			$('#window-img').css('display', 'none');
    		},
    		end: function() { 
    			$('#window-img').css('display', 'none');
    		}
    	});
    }

调用函数

$('#imgT').on('click', function() { 
    	var curImgUrl = this.src;
    	windowImg(curImgUrl);
    });

*  注意事项：

在写的过程中遇到了一些问题，总结一下避免再次踩坑：  
由于弹层的图片是动态添加生成的，所以必须在调用layer.open()之前，先完成对弹层内容的渲染，这样可以实现弹层打开在页面居中~  
由于弹层中图片显示的是原图，当图片过大时需要对它做一个最大宽高的限制，在网上找了很多方法都不是很好用，于是在img标签内加了一个 width='100%的设置，设置弹层最大宽度maxWidth:800，这样能够将图片按原比例缩小（但是该方法还有缺陷，只做了宽度的限制，如果图片高度过大的话，在页面中会显示不全造成遮挡）  
设置图片最大宽度的格式是maxWidth:800，一开始按area的写法：maxWidth: ‘290px’，发现怎么都无效，文档还是要看仔细  
只有当area: 'auto’时，maxWidth的设定才有效

原文：https://blog.csdn.net/HuangsTing/article/details/99644548

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 layer点击小图预览图片

html代码： <div id="window-img" style="display: none"></div> 封装一个函数 function win

柔情只为你懂/ 2023年07月13日 13:55/ 0 赞/ 21 阅读

相关 uni-app点击预览图片

uni-app点击预览图片在uni-app中已经提供了预览图片的方法`uni.previewImage`，直接调用就可以了如果是类似轮播图，是固定是几张图片，直接获

た入场券/ 2023年06月30日 08:57/ 0 赞/ 37 阅读

相关微信小程序---实现点击图片预览

单个图片 WXML <image bindtap="preview" data-src="{ {img}}" src="{ {

曾经终败给现在/ 2023年02月18日 04:29/ 0 赞/ 38 阅读

相关微信小程序点击单个图片进行预览图片，点击预览pdf文件

这里介绍的是单个图片点击预览的，也可以多张，方法差不多 index.wxml <view class="page"> <view class="pag

待我称王封你为后i/ 2022年12月10日 08:55/ 0 赞/ 845 阅读

相关 uni-app点击预览图片

<image :src="info.shopLogoUrl" @tap="_previewImage(info.shopLogoUrl)" mode="widthFi

朴灿烈づ我的快乐病毒、/ 2022年12月02日 00:43/ 0 赞/ 850 阅读

相关点击小图放大至全屏预览

点击小图放大至全屏预览效果，推荐2个常用的第三方库，第一个库功能比较基础，还需要自己额外封装。 [PhotoView][] ![在这里插入图片描述][2021071716

秒速五厘米/ 2022年08月29日 15:59/ 0 赞/ 467 阅读

相关微信图片点击预览

$(function(){ var imgsurl=[]; var nowurl=''; var imgObj=$(".swi

快来打我*/ 2022年06月08日 09:50/ 0 赞/ 926 阅读

相关微信小程序：点击图片预览

做微信小程序的时候使用的图片大小不尽相同，为了让使用者能够浏览原图，就需要给图片添加点击预览的功能，下面我详细介绍一下实现步骤，首先介绍微信小程序文档中的使用教程： ![

妖狐艹你老母/ 2022年04月03日 03:14/ 0 赞/ 691 阅读

相关 uni-app点击预览图片

<image :src="info.shopLogoUrl" @tap="_previewImage(info.shopLogoUrl)" mode="widthFi

忘是亡心i/ 2021年07月24日 21:31/ 1 赞/ 1522 阅读

相关 uniapp 上传图片、点击预览图片

1、在回调中打开本地相册 uni.chooseImage({ count:上传照片数量, //浏览器无法限制,默认上传数量为9

比眉伴天荒/ 2021年07月24日 11:07/ 0 赞/ 1773 阅读