1. 程式人生 > >點選檢視大圖滑動預覽(h5,pc通用)

點選檢視大圖滑動預覽(h5,pc通用)

點選預覽大圖並滑動觀看,支援手機端和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>