WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

4-4. 外掛程式再運用

試試 瀑布流排版 jquery plugin Masonry，看看範例，下載 JS 檔案

安排 HTML 元素物件部份

  <!-- 瀑布流排版masonry start 以下的 ul,li 也可以使用 div -->
  <ul class="itemGroup">
    <li class="item"> 
      <a href="路徑/大圖圖檔"><img src="路徑/縮圖圖檔" alt=""></a>
      <h2>標題文字</h2>
      <p>內容文字</p>
    </li>

    <li class="item"> ......  </li>
  </ul>
  <!-- 瀑布流排版masonry end -->

設定 CSS 樣式部份

  .itemGroup { margin: 0 auto; }
  .item { width: 200px; margin: 10px; padding: 7px; background-color: #fff; }
  .item a img { width: 100%; height: auto; }
  .item h2 { font-size: 16px; color: darkred; }
  .item p { font-size: 13px; text-align: justify; color: #333; }

載入需要的 JS 檔案：masonry.pkgd.min.js

  <script src="js/masonry.pkgd.min.js"></script>

加上需要的 JS 程式部份

  $('.itemGroup').masonry({
    itemSelector: '.item',
    columnWidth: 220
  });

試試 捲動進場視差動態效果 wow.js 、 Animate.css 以及 使用說明頁

安排 HTML 元素物件加上需要的 class 名稱

<!-- 例如 -->
  <li class="item wow animate__animated animate__fadeInUp"> 
    <a href="路徑/大圖圖檔"><img src="路徑/縮圖圖檔" alt=""></a>
    <h2>標題文字</h2>
    <p>內容文字</p>
  </li>

連結 CSS 樣式檔案：animate.css

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

載入需要的 JS 檔案：wow.js

<script src="js/wow.min.js"></script>

加上需要的 JS 程式部份

new WOW().init();

再試試 點選縮圖展現大圖 的效果 LightBox (基本型)

或試試 點選縮圖展現大圖 的效果 FancyBox (變化型，V1免費，V2以後付費)

　 還可以在網上搜尋：jquery plugin LightBox 或是 jquery plugin Gallery 有更多的外掛...

 

 

go TOP