我相信在移动端项目中，大家都会遇到图片浏览的问题，像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. 最精简使用MORMOT

    MORMOT是免费开源的SDK,它封装了HTTP.SYS,这是许多人使用它的原因,让人难以想像的是它居然支持DELPHI6及以上版本. 但MORMOT本身已经被封装的很庞大,它提供许多的单元,这让人不 ...

  2. mac上使用sips命令快速裁剪、旋转、翻转图片

    mac上使用sips命令快速裁剪.旋转.翻转图片 日常开发工作中,经常碰到要对图片进行一些简单的处理,不需要动用PS,在mac上就有一个很好的命令行工具:sips 这里我们不具体展开讲,仅贴出几个常用 ...

  3. C#中的断言(Assert)

    重构-断言 现象:某一段代码需要对程序状态做出某种假设 做法:以断言明确表现这种假设 动机: 常常有这种一段代码:只有某个条件为真是,该改名才能正常运行. 通常假设这样的假设并没有代码中明确表现出来, ...

  4. SpringBoot项目实现配置实时刷新功能

    需求描述:在SpringBoot项目中,一般业务配置都是写死在配置文件中的,如果某个业务配置想修改,就得重启项目.这在生产环境是不被允许的,这就需要通过技术手段做到配置变更后即使生效.下面就来看一下怎 ...

  5. [IR] Inverted Index & Boolean retrieval

    教材:<信息检索导论> 倒排索引 How to build Inverted Index? 1. Token sequence. 2. Sort by terms. 3. Dictiona ...

  6. 基于EasyDSS流媒体RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器解决方案创建视频点播、短视频、视频资源库等视频播放系统

    需求背景 最近有很多用户咨询关于视频点播问题,主要需求集中在如何搭建属于自己的视频点播平台: 实现的功能可以大体归类为:对应自身拥有的视频文件,需要发布到一个网站,其他用户都可以实现点播观看. 针对于 ...

  7. upgrade rubygems

    gem install rubygems-update update_rubygems gem update --system gem update

  8. 机器学习技法实现（一）：AdaBoost- Decision Stump （AdaBoost - 决策树的基于Matlab的实现）

    经过前面对AdaBoost的总结,下面要基于Matlab实现AdaBoost-Stump进行二维平面数据点的分类的实验. 一. 实验原理 参看 http://blog.csdn.net/lg12591 ...

  9. Oracle spatial空间查询的选择度分析

    在上一篇中,我用一个案例演示了对于数值或字符串类型的字段,选择度的计算方法.并证明了当字段值的选择度不同时,将会影响CBO选择最终的执行计划.对于可排序的字段类型,选择度计算模型已经有很多人写博客介绍 ...

  10. XML解析详解|乐字节

    大家好,乐字节的小乐又来了,Java技术分享哪里少的了小乐!上次我们说了可扩展标记语言XML之二:XML语言格式规范.文档组成,本文将介绍重点——XML解析.   基本的解析方式有两种:一种叫 SAX ...