mui点击小图放大预览

最新推荐文章于 2024-08-07 10:07:56 发布

0?0

最新推荐文章于 2024-08-07 10:07:56 发布

阅读量6.9k

点赞数 4

分类专栏： MUI

本文链接：https://blog.csdn.net/weixin_42301962/article/details/82971158

版权

MUI 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

所需代码https://github.com/Yanglepin/imageView

引用css文件

<link rel="stylesheet" href="css/imageview.css" />
<link rel="stylesheet" href="css/mui.imageviewer.css" />

引用js文件

<script type="text/javascript" src="js/mui.imageViewer.js" ></script>
<script type="text/javascript" src="js/mui.previewimage.js" ></script>
<script type="text/javascript" src="js/mui.zoom.js" ></script>

mui初始化之后调用mui.previewImage()方法

mui.previewImage();

预览的小图需要两个属性

<img src="demo.png" data-preview-src="" data-preview-group="4">  
 //data-preview-src(没有这个属性，Js无法抓取图片)
//data-preview-group(设定为一个组的图片,一个组有多少图片，左上角数字显示就有多少)