关于移动端图片浏览,previewimage的使用
我相信在移动端项目中,大家都会遇到图片浏览的问题,像qq,微信,微博,淘宝,当你点击图片时,图片会放大全屏显示,双击图片时图片继续放大查看,双指左右滑动也可以放大,当你再次点击时图片,图片恢复原始大小,并且图片可以左右滑动切换,
今天给大家讲讲我在项目中如何实现这个功能的。
首先我们将要用到previewimage.js,mui.zoom,js和mui.js或者mui.min.js,还有一个previewimage.css样式。下面直接看代码,注释也很详细。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
<link rel="stylesheet" type="text/css" href="css/mui.previewimage.css"/>
</head>
<body>
<!-- html结构 -->
<div class="mui-content">
<p>这是第一张图</p>
<p>
<img src="img/1.png" data-preview-src="" data-preview-group="1" />
</p>
<p>这是第二张图</p>
<p>
<img src="img/2.jpg" data-preview-src="" data-preview-group="1" />
</p>
<p>这是第三张图</p>
<p>
<img src="img/3.jpg" data-preview-src="" data-preview-group="1" />
</p>
</div>
<!--引入所需要的插件-->
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 初始化previewImage
mui.previewImage();
</script>
</body>
</html>
结构,引入样式,相关js插件,初始化不用多说,注意到的是在img标签内的其他两个属性data-preview-src="" 和 data-preview-group="1"
这两个属性是必填的,data-preview-src
为点击放大时预览图片的链接,默认可为空,为空时则是当前图片的链接;data-preview-group
将图片声明为同一组预览图。当data-preview-group里面的值为同一组时浏览图片时左右滑动即可查看同一组图片,一般情况下都将data-preview-group的值设置为1,即data-preview-group="1"。然后你就可以打开查看效果了。
当然,这只是最简单的需求,如果需要在浏览图片长按弹窗头部显示其他内容的话,还需要在previeimages.js里面修改源代码。
关于移动端图片浏览,previewimage的使用的更多相关文章
- 14.移动端图片浏览组件 react-wx-images-viewer
安装 npm install --save react-wx-images-viewer 使用 import WxImageViewer from 'react-wx-images-viewer'; ...
- 用CSS和第三方库来提升图片浏览体验
你是否关注过浏览.点击图片这个微妙的过程,不同的图片展现.交互方式各带来什么样的观感?本文聚焦于图片浏览这个过程以及如何使用CSS3和第三方库来提升体验. 先看下Pinterest.Flickr等时下 ...
- CKEditor 自定义按钮插入服务端图片
CKEditor 富文本编辑器很好用,功能很强大,在加上支持服务端图片上传的CKFinder更是方便, 最近在使用CKFinder的时候发现存在很多问题,比如上传图片的时候,图片不能按时间降序排列,另 ...
- HTML5移动端图片左右切换动画
插件描述:HTML5移动端图片左右切换动画 小海今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外 ...
- 图片浏览(CATransition)转场动画
Main.storyboard ViewController.m // // ViewController.m // 8A04.图片浏览(转场动画) // // Created by huan ...
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
- Android 高级UI设计笔记14:Gallery(画廊控件)之 3D图片浏览
1. 利用Gallery组件实现 3D图片浏览器的功能,如下: 2. 下面是详细的实现过程如下: (1)这里我是测试性代码,我的图片是自己添加到res/drawable/目录下的,如下: 但是开发中不 ...
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- 第17讲- UI常用组件之ImageView图片浏览
第17讲 UI常用组件之ImageView图片浏览 二.图片浏览ImageView ImageView就是一个用来显示图片的视图: ImageView常见属性 常见属性 对应方法 说明 android ...
随机推荐
- IDEA实现SpringBoot热部署
1.pom.xml添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifac ...
- 【数值分析】Python实现Lagrange插值
一直想把这几个插值公式用代码实现一下,今天闲着没事,尝试尝试. 先从最简单的拉格朗日插值开始!关于拉格朗日插值公式的基础知识就不赘述,百度上一搜一大堆. 基本思路是首先从文件读入给出的样本点,根据输入 ...
- CS224n学习笔记(三)
语言模型 对于一个文本中出现的单词 \(w_i\) 的概率,他更多的依靠的是前 \(n\) 个单词,而不是这句话中前面所有的单词. \[ P\left(w_{1}, \ldots, w_{m}\rig ...
- SpringMVC(中)
一.传值方式 (1)Map Controller @Controller public class MyController { @RequestMapping("first") ...
- Java线程的wait(), notify()和notifyAll()
Java线程生命周期 类java.lang.Thread包含一个静态的State enum用于定义每种可能的状态. 在任意的时间点, 线程会处于以下的状态之一: NEW – 新创建的线程, 还未启动( ...
- tomcat请求响应代码分享
NioEndpoint的Poller轮询器持续进行扫描是否有新的event()方法调用后产生新的event配置. 发现后执行AbstractProtocol.class中的process()方法进行处 ...
- Python3基础 yield send 变量名= yield i
Python : 3.7.3 OS : Ubuntu 18.04.2 LTS IDE : pycharm-community-2019.1.3 ...
- matlab学习笔记8 基本绘图命令-初级二维绘图/交互式绘图
一起来学matlab-matlab学习笔记8 基本绘图命令_5 初级二维绘图/交互式绘图 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matlab 程序设计与综合应用&g ...
- win10无法运行phantomjs
@参考文章 echarts利用phantomjs将 图片保存到电脑,在win7下好好的,在win10下报错: 'phantomjs' 不是内部或外部命令,也不是可运行的程序或批处理文件. 在win7下 ...
- 使用 Consul 作为 Python 微服务的配置中心
使用 Consul 作为 Python 微服务的配置中心 Consul 作为数据中心,提供了 k/v 存储的功能,我们可以利用这个功能为 Python 微服务提供配置中心. Consul 提供了 HT ...