mui.previewimage的图片预览

先在文件末端中引用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">// 初始化previewImagemui.previewImage();</script></body>
</html>

需要的脚本及样式

mui.previewimage的图片预览相关推荐

mui的学习图片预览
css部分 <link href="./css/mui.min.css" rel="stylesheet"/> <style> html ...
一款Android图片预览的开源库，几乎百分百还原微信的图片预览。
图片预览组件PreviewPictureView gihub地址:https://github.com/OneZeroYang/PreviewPictureView 几乎还原微信的图片预览,核心使用共 ...
uniapp 图片预览实现
uniapp 图片预览实现提示:下面案例可供参考一.app端使用 uni.previewImage 进行图片预览可去 uniapp官网查看具体使用:(https://uniapp.dclou ...
mui 图片预览（自定义）功能 - 案例篇
mui 图片预览(自定义)功能 - 案例篇实现目标: 点击图片,弹出层遮盖,并放大显示刚才点击的图片: 图片对应的标题,也一并显示. 效果截图: 重要提示Tips: 使用前,务必设置图片的alt属性 ...
微信小程序之wx.previewImage图片预览(多张图片预览)
wxml部分代码如下: <block wx:for="{{pictures}}" wx:for-item='item' wx:for-index='idx'><i ...
html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器以前写过上传组件,见打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...
uniapp实现图片预览功能
点击图片实现预览功能如下:  <view class="ms_shops"><swiper class="ms_swi ...
图片预览(适用于IE6,9,10，Firefox)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><me ...
小程序自定义图片预览和多图下载的实现
小程序开发中图片列表的需求再常见不过了,通常都会配合大图预览和图片下载的功能但是微信又没有提供可自定义的图片预览功能,有时候会有需求在预览大图的时候收藏或者下载啥的用 wx.previewImage ...

mui.previewimage的图片预览

mui.previewimage的图片预览相关推荐

最新文章

热门文章