點擊查看大圖滑動預覽(h5,pc通用)

時間 2019-11-10

標籤點擊查看滑動預覽 h5 通用简体版

原文原文鏈接

點擊預覽大圖並滑動觀看，支持手機端和pc端,具體功能以下圖：javascript

一. touchTouch 的js和css 以及jquery依賴庫css

<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值也是圖片地址。　html

<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>

三.給結構加入本身想要的樣式。java

.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中執行方法。jquery

<script>
    $(function(){
        $('#thumbs a').touchTouch();
    })
</script>

加上本身想要的css樣式就完成了，下面是 touchTouch 插件包下載地址：ajax

連接: https://pan.baidu.com/s/1_BCUSss8_3i3yiSATyc89w 提取碼: h436url

注：整個demo結構spa

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。