点击查看大图滑动预览(h5,pc通用)

最新推荐文章于 2022-12-07 10:45:22 发布

weixin_30872789

最新推荐文章于 2022-12-07 10:45:22 发布

阅读量971

点赞数 1

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/a-cat/p/9805664.html

版权

点击预览大图并滑动观看，支持手机端和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>

转载于:https://www.cnblogs.com/a-cat/p/9805664.html

weixin_30872789

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击查看大图滑动预览(h5,pc通用)

点击预览大图并滑动观看，支持手机端和pc端,具体功能如下图：一. touchTouch 的js和css 以及jquery依赖库<link rel="stylesheet" type="text/css" href="touchTouch/touchTouch.css" /><script src="https://cdnjs.cloudflare.co...
复制链接

扫一扫