mui.previewimage的图片预览

最新推荐文章于 2024-08-22 10:22:49 发布

呆萌滴加菲猫

最新推荐文章于 2024-08-22 10:22:49 发布

阅读量2.4k

点赞数 1

分类专栏： MUI 文章标签：图片预览

本文链接：https://blog.csdn.net/weixin_44310502/article/details/89350111

版权

MUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先在文件末端中引用mui.previewimage.js/ mui.zoom.js这二个脚本
再在文件头部加入mui.previewimage.css/mui.css这两个样式文件
在img标签中加入

	data-preview-src="" data-preview-group="1"

如：

	<img class="imgTu" src="../images/图片.jpg" data-preview-src="" data-preview-group="1" />

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="../../css/mui.css">
		<link rel="stylesheet" href="../../css/my.previewimage.css" />
	</head>
	<body>
		
		<img class="imgTu" src="../images/图片.jpg" data-preview-src="" data-preview-group="1" />
		
		<script src="js/mui.js"></script>
		<script src="js/mui.zoom.js"></script>
		<script src="js/mui.previewimage.js"></script>
		<script type="text/javascript">
			// 初始化previewImage
				mui.previewImage();
		</script>
	</body>
</html>

需要的脚本及样式