mui图片预览

最新推荐文章于 2022-07-25 15:58:29 发布

一名写前端的GISer

最新推荐文章于 2022-07-25 15:58:29 发布

阅读量625

点赞数 1

分类专栏： MUI

本文链接：https://blog.csdn.net/wangchaohpu/article/details/112272037

版权

MUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文件引入

css:previewimage.css、mui.min.css

js:mui.min.js、mui.zoom.js、mui.previewimage.js

相关资源见：https://pan.baidu.com/s/1bT0I3Gft04Mat3JdygMjHA 密码：7oon

HTML页面如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>图片预览</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/previewimage.css"/>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">图片预览</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div>
					<img src="img/lf.jpg" data-preview-src="" />
				</div>
			</div>
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/mui.zoom.js"></script>
	<script src="js/mui.previewimage.js"></script>
	<script>
		// 初始化图片预览功能
		mui.previewImage();
	</script>
</html>

重要代码：

（1）<img src="img/lf.jpg" data-preview-src="" /> 中的data-preview-src=""

（2）初始化图片预览功能：mui.previewImage();