我相信在移动端项目中，大家都会遇到图片浏览的问题，像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的使用的更多相关文章

  1. 14.移动端图片浏览组件 react-wx-images-viewer

    安装 npm install --save react-wx-images-viewer 使用 import WxImageViewer from 'react-wx-images-viewer'; ...

  2. 用CSS和第三方库来提升图片浏览体验

    你是否关注过浏览.点击图片这个微妙的过程,不同的图片展现.交互方式各带来什么样的观感?本文聚焦于图片浏览这个过程以及如何使用CSS3和第三方库来提升体验. 先看下Pinterest.Flickr等时下 ...

  3. CKEditor 自定义按钮插入服务端图片

    CKEditor 富文本编辑器很好用,功能很强大,在加上支持服务端图片上传的CKFinder更是方便, 最近在使用CKFinder的时候发现存在很多问题,比如上传图片的时候,图片不能按时间降序排列,另 ...

  4. HTML5移动端图片左右切换动画

    插件描述:HTML5移动端图片左右切换动画 小海今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外 ...

  5. 图片浏览（CATransition）转场动画

    Main.storyboard ViewController.m // //  ViewController.m //  8A04.图片浏览(转场动画) // //  Created by huan ...

  6. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  7. Android 高级UI设计笔记14：Gallery（画廊控件）之 3D图片浏览

    1. 利用Gallery组件实现 3D图片浏览器的功能,如下: 2. 下面是详细的实现过程如下: (1)这里我是测试性代码,我的图片是自己添加到res/drawable/目录下的,如下: 但是开发中不 ...

  8. 纯原生js移动端图片压缩上传插件

    前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...

  9. 第17讲- UI常用组件之ImageView图片浏览

    第17讲 UI常用组件之ImageView图片浏览 二.图片浏览ImageView ImageView就是一个用来显示图片的视图: ImageView常见属性 常见属性 对应方法 说明 android ...

随机推荐

  1. 【软工实践】Alpha冲刺（6/6）

    链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 tomcat的学习与实现 服务器后端部署,API接口的beta版实现 后端代码 ...

  2. FFMPEG Tips 如何提取码流的基本信息

    原文连接: https://zhuanlan.zhihu.com/p/23448271 1. 码流中的哪些信息值得关注 ? [ ] 是否包含:音频.视频 [ ] 码流的封装格式 [ ] 视频的编码格式 ...

  3. 运行 puppeteer 报错 chrome: error while loading shared libraries: libpangocairo-1.0.so.0: cannot open shared object file: No such file or directory

    运行 puppeteer 报错 chrome: error while loading shared libraries: libpangocairo-1.0.so.0: cannot open sh ...

  4. echo * 和ls *之间的区别？

    背景描述: 今天 一同事做入职考试,涉及到1题目,echo * 和ls *之间的区别,没有用过这个用法,再次记录下. 操作过程: 1.执行echo * [root@localhost ~]# echo ...

  5. Mysql查询的执行顺序

    顺序: FROM JOIN ON WHERE GROUP BY (从此处开始可以使用select中指定的别名) AVG.SUM.MAX HAVING SELECT DISTINCT ORDER BY ...

  6. CentOS 7.5二进制部署Kubernetes1.12(加密通信)(五)

    一.安装方式介绍 1.yum 安装 目前CentOS官方已经把Kubernetes源放入到自己的默认 extras 仓库里面,使用 yum 安装,好处是简单,坏处也很明显,需要官方更新 yum 源才能 ...

  7. 使用 Consul 作为 Python 微服务的配置中心

    使用 Consul 作为 Python 微服务的配置中心 Consul 作为数据中心,提供了 k/v 存储的功能,我们可以利用这个功能为 Python 微服务提供配置中心. Consul 提供了 HT ...

  8. Linux 反弹 Shell

    攻击场景 Attacker:192.168.0.106 win10 Victim:192.168.2.140 kali NC 反弹 shell Netcat简介 俗称瑞士军刀或NC,小巧强悍,可以读写 ...

  9. 轮胎魔术公式(Magic Fomula)模型

    魔术公式是用三角函数的组合公式拟合轮胎试验数据,用一套形式相同的公式就可以完整地表达轮胎的纵向力Fx.侧向力Fy.回正力矩Mz.翻转力矩Mx.阻力矩My以及纵向力.侧向力的联合作用工况,故称为“魔术公 ...

  10. web版本的用户登陆票据 FormsAuthenticationTicket

    FormsAuthenticationTicket ticket = new FormsAuthenticationTicket(1, "username", DateTime.N ...