点击预览大图并滑动观看，支持手机端和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. SpringCloud 中集成Sentinel+Feign实现服务熔断降级

    Sentine 1.背景 Sentinel 是阿里中间件团队开源的,面向分布式服务架构的轻量级高可用流量控制组件,主要以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度来帮助用户保护服务的稳 ...

  2. Centos6 Tengine开启http2传输协议

    1.前言 最近在优化网站的访问速度,为网站开启http2协议,这个协议有什么优点呢?如下: http2是下一代的传输协议,以后都会普遍用它,是一个趋势. http2有多路复用特性,意思是访问一个域名下 ...

  3. CSPS模拟 77

    %%两位AK爷zkt和skyh T1 位间独立,分别讨论 T2 维护标记,代替移位 T3 同一点对,多种联通,没法搞. 发现最多四路连通,考虑容斥. 显然的奇加偶减. 发现统计某种颜色的点之间的联通数 ...

  4. Laravel用户认证

    前期准备 Laravel的权限配置文件位于 config/auth.php,Laravel的认证组件由"guards"和"providers"组成, Guard ...

  5. 通俗易懂了解React生命周期

    1.前言 学习React时,学习组件的生命周期是非常重要的,了解了组件的"从无到有再到无"所经历的各个状态,对日后写高性能的组件会有很大的帮助. 2.生命周期图 React的生命周 ...

  6. 易初大数据 2019年10月24日 spss笔记 王庆超

    数据文件的重置结构:横向结构(个案组),纵向结构,不符合分析方法的时候就需要重组,选定变量重组为个案,数据—重构,重构数据向导,选定变量重组为个案,将选定个案重构位变量,转置所有数据,变量组数目,一个 ...

  7. php查询字符串的函数

    /* 查找一个字符串在另一个字符串的第一次出现,并返回其余部分(strstr别名) */ var_dump(strchr("hello world hello", "wo ...

  8. HTML创建图像映射，布局，表单

    来源: 实验楼 创建图像映射 在这之前我们动手试验过将图片作为链接来使用,触发链接的方式就是点击图片的任何地方都可以链接到跳转地址,有时我们需要实现,点击图片的不同地方跳转到不同的地方.意思就是,一张 ...

  9. Golang stackError 补充go错误定位能力

    用过go的都知道,go的error实现很简单,errors.New实现的error类并不存储堆栈数据,这导致一个问题,就是多次error return后,或panic后recover了,找不到触发异常 ...

  10. 019.Kubernetes二进制部署插件dashboard

    一 修改配置文件 1.1 下载解压 [root@k8smaster01 ~]# cd /opt/k8s/work/kubernetes/ [root@k8smaster01 kubernetes]# ...