点击预览大图并滑动观看，支持手机端和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. Linux下搭建.NetCore3.0环境及创建项目

    ================================================== ================================================= ...

  2. 还不会用FindBugs？你的代码质量很可能令人堪忧

    前言 项目中代码质量,往往需要比较有经验的程序员的审查来保证.但是随着项目越来越大,代码审查会变得越来越复杂,需要耗费越来越多的人力.而且程序员的经验和精力都是有限的,能审查出问题必定有限.而在对代码 ...

  3. commix工具配合命令注入

    commix简介 commix是一款由python编写,开源自动化检测系统命令注入工具  https://github.com/commixproject/commix commix 参数 选项: - ...

  4. ctf pwn ida 分析技巧

    几年前的笔记,搬运过来 ---   1 先根据运行程序得到的信息命名外围函数,主要函数大写开头 2 /添加注释 3 直接vim程序,修改alarm为isnan可以patch掉alarm函数 4 y 可 ...

  5. 【Java必修课】String.intern()原来还能这么用（原理与应用）

    1 简介 String.intern()是JDK一早就提供的native方法,不由Java实现,而是底层JVM实现,这让我们对它的窥探提高了难度.特别是在Oracle收购了Sun公司后,源代码不开源了 ...

  6. [考试反思]0815NOIP模拟测试22

    40分,15名. 1-4:120 75 70 70 35分20名...总之差距极小不想说了 昨天教练说:以后的考试还是联赛知识点,但是难度比联赛高. 没听进去,以为是对于所有人而言的,也就是T1难度变 ...

  7. Vue项目中执行npm run dev 不报错也不显示点击的地址链接

    问题描述: 输入npm run dev 没有报错也没有显示可以点击的地址链接,如下图: 解决方法: 具体配置: autoOpenBrowser默认为false,改为true.重新 npm run de ...

  8. PyCharm安装及使用教程

    1  PyCharm下载 PyCharm的下载安装非常简单,可以直接到Jetbrains公司官网下载,具体步骤如下: (1)打开Pycharm官网http://www.jetbrains.com,选择 ...

  9. 基于 HTML5 + WebGL 实现 3D 挖掘机系统

    前言 在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求.如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因 ...

  10. python机器学习——随机梯度下降

    上一篇我们实现了使用梯度下降法的自适应线性神经元,这个方法会使用所有的训练样本来对权重向量进行更新,也可以称之为批量梯度下降(batch gradient descent).假设现在我们数据集中拥有大 ...