MUI图片预览功能

最新推荐文章于 2021-01-06 14:38:51 发布

慕容屠苏

最新推荐文章于 2021-01-06 14:38:51 发布

阅读量7.8k

点赞数

分类专栏：大前端爬坑之路 web移动端

本文链接：https://blog.csdn.net/kerryqpw/article/details/82559331

版权

大前端爬坑之路同时被 2 个专栏收录

188 篇文章 60 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

web移动端

67 篇文章 0 订阅

订阅专栏

本文介绍了在web端和手机app中使用MUI实现图片预览的方法，通过点击缩略图展示大图列表。详细讲解了实现所需的效果及对应的HTML和CSS代码。

摘要由CSDN通过智能技术生成

MUI图片预览功能

web端开发和手机app经常需要用到图片预览功能。

点击缩略图，显示大图列表。

实现效果：

实现代码：

html:

<div class="mui-content-padded">
				<p>这是图片放大预览示例，点击如下图片体验全屏预览功能</p>
				<p>
					<img src="../images/yuantiao.jpg" data-preview-src="" data-preview-group="1" />
				</p>
				<p>图片全屏后，双击或双指缩放均可对图片进行放大、缩小操作，左右滑动可查看同组(data-preview-group相同的图片为一组)其它图片，点击会关闭预览</p>
				<p>
					<img src="../images/muwu.jpg&#