mui 图片预览（自定义）功能 - 案例篇

mui 图片预览（自定义）功能 - 案例篇

---

实现目标：

1. 点击图片，弹出层遮盖，并放大显示刚才点击的图片；
2. 图片对应的标题，也一并显示。

---

效果截图：

---

重要提示Tips：

• 使用前，务必设置图片的alt属性与<p class="horname">重要新闻01</p>的名称一样，即可。
• 也可自行二次开发修改。

---

重要代码 · html如下：

	<!--重要新闻-->
	<div id="item_ygry" class="hzjt-container2 mui-control-content">
		<div class="imghonorwrap">
			<div class="imgdiv">
				<img class="horimg" src="statics/images/hz_images/news/news-1.jpg" data-preview-src="" data-preview-group="1" alt="alt重要新闻01">
				<p class="horname">重要新闻01</p>
			</div>
			<div class="imgdiv">
				<img class="horimg" src="statics/images/hz_images/news/news-2.jpg" data-preview-src="" data-preview-group="1" alt="alt重要新闻02">
				<p class="horname