html5仿微信朋友圈相簿圖片放大程式碼

zt專用發表於2018-07-26
HTML
html：
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>html5仿微信朋友圈相簿圖片放大程式碼</title>
   <meta charset="utf-8">
   <!--http://cdn.amazeui.org/amazeui/2.5.0/css/amazeui.min.css-->
   <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.5.0/css/amazeui.min.css" />
   <script src="js/jquery.min.js"></script>
   <script src="js/amazeui.js"></script>
<style>
   .middle-img {
      position: absolute;
      left: 259px;
      top: 0px;
      width: 40px;
   }

   .up-img {
      position: absolute;
      top: -40px;
      left: 261px;
      width: 40px;
   }

   .down-img {
      position: absolute;
      top: 40px;
      left: 257px;
      width: 40px;
   }

   .left-img {
      position: absolute;
      left: 218px;
      width: 40px;
   }

   .right-img {
      position: absolute;
      left: 300px;
      width: 40px;
   }
   @media screen and (max-width:450px) {
      .middle-img {
         position: absolute;
         left: 259px;
         top: 0px;
         width: 40px;
         display: none;
      }

      .up-img {
         position: absolute;
         top: -40px;
         left: 261px;
         width: 40px;
         display: none;
      }

      .down-img {
         position: absolute;
         top: 40px;
         left: 257px;
         width: 40px;
         display: none;
      }

      .left-img {
         position: absolute;
         left: 218px;
         width: 40px;
         display: none;
      }

      .right-img {
         position: absolute;
         left: 300px;
         width: 40px;
         display: none;
      }

      .rotate_jia{
         display: none;
      }
      .rotate_div{
         display: none;
      }
      .rotate_jian{
         display: none;
      }
   }
   .gallery-fts-container {width: 1200px;margin: 40px 100px 0;}
   .am-gallery-item:hover{ /*當有滑鼠懸停在連結上 樣式效果*/
      width: 300px;
      height: 200px;;
      -webkit-transform:scale(1.25);/*scale元素2d的擴大、縮小*/
      -moz-transform:scale(1.25);
      -ms-transform:scale(1.25);
      transform:scale(1.25);
      -webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);
      -moz-box-shadow:0 3px 6px rgba(0,0,0,.5);
      -o-box-shadow:0 3px 6px rgba(0,0,0,.5);  /*-moz-,  -webkit-, -o-這些都是瀏覽器字首。Opera: -o-*/
      box-shadow:0 3px 6px rgba(0,0,0,.5);
      position: relative;
      z-index: 5;/* 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面*/
   }
   .gallery-fts-container .am-gallery li {margin-right: 20px;width: 280px;}
   .gallery-fts-container .am-gallery li:last-child {margin-right: 0;}
</style>
</head>
<body>
<!--要想使用中圖效果，設定圖片畫素2*00X2*00即可-->
   <div class="gallery-fts-container">
      <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-gallery-overlay" data-am-gallery="{ pureview: true }" >
         <li>
            <div class="am-gallery-item ">
               <a href="images/image-01.jpg" class="">
                  <img src="images/image-01.jpg"  alt="image-01.jpg"/>
                  <h3 class="am-gallery-title">遠方 有一個地方 那裡種有我們的夢想</h3>
                  <div class="am-gallery-desc">2375-09-26</div>
               </a>
            </div>
         </li>
         <li>
            <div class="am-gallery-item">
               <a href="images/image-02.jpg" class="">
                  <img src="images/image-02.jpg"  alt="image-02.jpg"/>
                  <h3 class="am-gallery-title">某天 也許會相遇 相遇在這個好地方</h3>
                  <div class="am-gallery-desc">2375-09-26</div>
               </a>
            </div>
         </li>
         <li>
            <div class="am-gallery-item">
               <a href="images/image-03.jpg" class="">
                  <img src="images/image-03.jpg"  alt="image-03.jpg"/>
                  <h3 class="am-gallery-title">不要太擔心 只因為我相信</h3>
                  <div class="am-gallery-desc">2375-09-26</div>
               </a>
            </div>
         </li>
         <li>
            <div class="am-gallery-item">
               <a href="images/image-04.jpg" class="">
                  <img src="images/image-04.jpg"  alt="image-04.jpg"/>
                  <h3 class="am-gallery-title">終會走過這條遙遠的道路</h3>
                  <div class="am-gallery-desc">2375-09-26</div>
               </a>
            </div>
         </li>
      </ul>
   </div>
</body>
</html>

目錄結構

相關文章