点击预览大图并滑动观看，支持手机端和pc端,具体功能如下图：

一. touchTouch 的js和css 以及jquery依赖库

<link rel="stylesheet" type="text/css" href="touchTouch/touchTouch.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="touchTouch/touchTouch.jquery.js" ></script>

二.写入html结构，注意，此处图片需要以background-image的形式插入，a 的href值也是图片地址。　

<div class="img-container" id="thumbs">

    <a href="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_zone.png" style="background-image: url(http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_zone.png);"></a>

    <a href="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_wechat.png" style="background-image: url(http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_wechat.png);"></a>

    <a href="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_xlwb.png" style="background-image: url(http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_xlwb.png);"></a>

</div>

　

三.给结构加入自己想要的样式。

.img-container{

    overflow: hidden;

}

.img-container a{

    float: left;

    width: 2.36rem;

    height: 2.36rem;

    overflow: hidden;

    background-size: 100% 100%;

    background-repeat: no-repeat;

}

四.在script中执行方法。

<script>

    $(function(){

        $('#thumbs a').touchTouch();

    })

</script>

加上自己想要的css样式就完成了，下面是 touchTouch 插件包下载地址：

链接: https://pan.baidu.com/s/1_BCUSss8_3i3yiSATyc89w 提取码: h436

注：整个demo结构

<!DOCTYPE html>

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title></title>

　　　　<link rel="stylesheet" type="text/css" href="touchTouch/touchTouch.css" />

　　　　<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

　　　　<script type="text/javascript" src="touchTouch/touchTouch.jquery.js" ></script>

　　　　<style>

　　　　　　.img-container{

　　　　　　　　overflow: hidden;

　　　　　　}

　　　　　　.img-container a{

　　　　　　　　float: left;

　　　　　　　　width: 2.36rem;

　　　　　　　　height: 2.36rem;

　　　　　　　　overflow: hidden;

　　　　　　　　background-size: 100% 100%;

　　　　　　　　background-repeat: no-repeat;

　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　<div class="img-container" id="thumbs">

　　　　　　<a href="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_zone.png" style="background-image: url(http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_zone.png);"></a>

　　　　　　<a href="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_wechat.png" style="background-image: url(http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_wechat.png);"></a>

　　　　　　<a href="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_xlwb.png" style="background-image: url(http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_xlwb.png);"></a>

　　　　</div>

　　　　<script>

　　　　　　$(function(){

　　　　　　　　$('#thumbs a').touchTouch();

　　　　　　})

　　　　</script>

　　</body>

</html>

　　

点击查看大图滑动预览(h5,pc通用)的更多相关文章

  1. Winforn中使用FastReport实现点击导出按钮PDF预览并弹出另存为对话框

    场景 FastReport安装包下载.安装.去除使用限制以及工具箱中添加控件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  2. vue项目 PC端点击查看大图

    今天,发现了一款还不错的插件来实现查看大图,成熟度也比较高,支持各种操作 原作品的github地址为 https://github.com/mirari/v-viewer 也有对应的中文文档,使用方法 ...

  3. js 点击文本框，预览选择图片

    点击文件选择框,选择图片文件,通过FileReader对象,读取图片文件中的内容,存放于result中,具体代码如下 <input type="file" onchange= ...

  4. eazyui 或bootstrap table表格里插入图片，点击查看大图

    columns: [ {field: 'state',checkbox: true,align: 'center',valign: 'middle'}, {field: 'contacts',sort ...

  5. 点击查看大图Activity

    1.使用方式 Intent intent = new Intent(FriendCircleActivity.this, ImageGralleryPagerActivity.class);//0,索 ...

  6. 使用java的 htpUrlConnection post请求 下载pdf文件，然后输出到页面进行预览和下载

    使用java的 htpUrlConnection post请求 下载pdf文件,然后输出到页面进行预览和下载 2018年06月07日 10:42:26 守望dfdfdf 阅读数:235 标签: jav ...

  7. vue-图片预览，查看大图

    [前言] 在 vue 项目中经常碰到图片预览需求,也就是点击小图查看大图.也有一些这样的第三方插件,如 vue-preview 等.但使用起来感觉版本经常变,而且有时 UI 需要在预览页面上加更多的东 ...

  8. 微信小程序：点击预览大图功能

    点击预览大图功能 1. 给轮播图swiper-item绑定点击事件 2. 预览功能的本质是调用了小程序的api:previewImage 微信公众号----文档----开发----API----媒体- ...

  9. iOS HTML图片本地预览

    引言 相信用过苹果手机的童鞋,会发现很多新闻类的应用,都可以实现HTML图片本地预览,那么这是如何实现的呢?本文将深入阐述其中的原理. 关于此功能,我还实现了一个DEMO,大家可以点击此访问更详细内容 ...

随机推荐

  1. Airy Memory 内存清理 + 注册码

    链接: https://pan.baidu.com/s/1ZGxDtJBMhrRtBISvL1Lv0w 提取码: ccjs

  2. USDT跑分系统开发

    USDT跑分系统开发找[林生:178-7666-2415微/电],USDT跑分系统开发,USDT跑分系统解决方案,USDT跑分系统定制,小程序开发.APP.公众号等软件开发. 数字资产结算通道的特点: ...

  3. CSPS模拟 86

    看见异或两个字就孩怕 T1 按位? T2 这道异或稍水啊233 貌似可以打表找找规律 emm七种转移,有重复刷表 优化一下? T3 skyh已经接了2杯水了(实际情况他已经ak了) cbx开始抬头傻笑 ...

  4. 问题 L: 「Usaco2005 Feb」竞选划区O(∩_∩)O 纯属的暴力

    题目描述 农场被划分为5x5的格子,每个格子中都有一头奶牛,并且只有荷斯坦(标记为H)和杰尔西(标记为J)两个品种． 如果一头奶牛在另一头上下左右四个格子中的任一格里,我们说它们相连． 奶牛要大选了． ...

  5. 1005 csp-s 60 凉凉

    T1 嘟嘟噜 上来一看数据范围1e9就蒙蔽,然后不知所措的打了一个 $ O(n)$的无脑算法,由于本人真的脑小,导致O(n)的柿子推了好长时间,导致心态崩了,然后........ 今天能明白了log的 ...

  6. 浅谈OI中的底层优化！

    众所周知,OI中其实就是算法竞赛,所以时间复杂度非常重要,一个是否优秀的算法或许就决定了人生,而在大多数情况下,我们想出的算法或许并不那么尽如人意,所以这时候就需要一中神奇的的东西,就是底层优化: 其 ...

  7. js获取文件里面的所有文件名

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 本地存储localstorage

    小小插件,封装了一个存取删 <script type="text/javascript"> /* *getItem(name) * *setItem(name,valu ...

  9. java多线程回顾4：线程通信

    1.线程的协调运行 线程的协调运行有一个经典案例,即生产者和消费者问题. 假设有一个货架,生产者往货架上放货物,消费者从货架上取货物. 为了方便讲解,制定一个规则,生产者每放上一个货物,消费者就得取走 ...

  10. 使用CBrother的CLIB库调用windows的API

    使用CBrother的CLIB库调用windows的API 2.1.0版本CBrother加入了CLib库,最新需要写一个工具,根据路径查杀一个Windows进程,研究了一下,CLib库的用法,感觉还 ...