点击预览大图并滑动观看，支持手机端和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. MIT线性代数：12.图和网络

  2. TCP/IP协议第一卷第二章

    环回接口: 127全网段均被作为环回地址. 传给广播地址或多播地址的数据报复制一份给环回接口,然后传送到以太网上.这是因为广播传送和多播传送的定义包含自己本身. 任何传给该主机IP地址的数据均送到环回 ...

  3. 模板（ac）：启发式合并

    首先说明一点:线段树合并不是启发式合并. 启发式合并的大概内容就是:把小的数据结构按照这个数据结构的正常插入方法,一个一个地暴力塞进去. 而线段树合并显然不是这个东西. 这道题的题解太烂了,所以耽误了 ...

  4. 如何在vue-cli项目中结合mockjs模拟假数据

    1.前言 在如今前后端分离的开发方式已被广泛采用的今天,前端同学和后端同学各自独立开发,后端提供数据接口,前端调用接口获取数据渲染页面.但是在实际开发中,后端开发由于逻辑相对复杂接口迟迟提供不到位,而 ...

  5. STL&&用法集合

    .....STL是c++里很强势很好用的一系列容器(函数)之类的,之前一直不太会用,所以总是暴毙....想着快比赛了,是时候理一下这些东西了. -1.pair 存放两个基本元素的东西 定义方法: pa ...

  6. 使用Samba或实现文件共享

    安装Samba服务软件包: 命令:yum install samba 使用Samba服务口令验证方式可以让共享文件更加的安全,做到仅让信任的用户访问,而且验证过程也很简单 第1步:检查当前是否为use ...

  7. 『题解』[NOI2016]优秀的拆分

    如果一个字符串可以被拆分为\(AABB\)的形式,其中$A和 B是任意非空字符串,则我们称该字符串的这种拆分是优秀的. 例如,对于字符串\(aabaabaa\),如果令\(A=aab\),\(B=a\ ...

  8. SpEL + AOP实现注解的动态赋值

    一.自定义注解 先聊聊这个需求,我需要根据用户的权限对数据进行一些处理,但是痛点在哪里呢?用户的权限是在请求的时候知道的,我怎么把用户的权限传递给处理规则呢?想了以下几种方案: Mybatis 拦截器 ...

  9. lqb 入门训练 A+B问题

    入门训练 A+B问题 时间限制:1.0s   内存限制:256.0MB     问题描述 输入A.B,输出A+B. 说明:在“问题描述”这部分,会给出试题的意思,以及所要求的目标. 输入格式 输入的第 ...

  10. nyoj 217-a letter and a number (char)

    217-a letter and a number 内存限制:64MB 时间限制:3000ms 特判: No 通过数:4 提交数:5 难度:1 题目描述: we define f(A) = 1, f( ...