html5仿微信朋友圈相册图片放大代码

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>
目录结构
html5仿微信朋友圈相册图片放大代码

猜你喜欢
