搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 JS程式語法 JQuery 頁籤式動態分類圖片導覽效果 (帶響應式設計範例) ...
byadmin 發表於 2013-6-12 17:07:58 , 10196人已閱讀 , 0人回應
頁籤式動態分類圖片導覽效果 , 透過jquery的視覺動態設計可以變成效果非常強烈的展示方式 , 圖片HOVER經過的時候可以顯示指定TITLE樣式以及簡單介紹 , 實用性非常高 ! 本案例帶有響應式設計 , 可以透過縮放瀏覽器視窗大小看到頁面響應式效果:

簡易使用教學



本效果實際應用非常簡單,分成兩個設定步驟:
步驟一、設定頁籤的分類列表 , data-option-value可自訂頁籤分類 , 全部分類則是參考第一條LI的類別寫法即可:
參考範例
  1. <section id="options">
  2.                                 <ul id="home-filters" class="option-set clearfix" data-option-key="filter">
  3.                                         <li><a href="#filter" data-option-value="*" class="selected active">All</a></li>
  4.                                         <li><a href="#filter" data-option-value=".marketing">Marketing</a></li>
  5.                                         <li><a href="#filter" data-option-value=".photography">Photography</a></li>
  6.                                         <li><a href="#filter" data-option-value=".branding">Branding</a></li>
  7.                                         <li><a href="#filter" data-option-value=".print">Print</a></li>
  8.                                         <li><a href="#filter" data-option-value=".webdesign">Web Design</a></li>
  9.                                 </ul>                       
  10.                         </section>       
複製代碼
步驟二、帶入圖片列表 , 透過data-category="分類" 指定剛剛步驟一所設定的分類項目 , 另外本效果案例對於圖片處理有三種比例效果,可分別設定套用類別:
第一種是大圖式(550*450px) - class="print photography item-wide"
第二種是一般小圖(265*215px) - class="branding print item-small"
第三種是長條形(265*450px) -  class="marketing webdesign item-high"

參考範例
  1. <ul class="portfolio grid ">
  2.                                         <li data-category="marketing" class="print photography item-wide">
  3.                                                 <a href="images/portfolio/image5-small.jpg" rel="prettyPhoto">
  4.                                                         <div class="grid-item-on-hover">
  5.                                                                 <div class="grid-text">
  6.                                                                         <h1>PICTURE TITLE [SR]</h1>
  7.                                                                 </div>
  8.                                                                 <span>photography, printing identity</span>
  9.                                                                
  10.                                                         </div>
  11.                                                         <img src="images/portfolio/image5-small.jpg" alt=" " />
  12.                                                 </a>
  13.                                         </li></ul>
複製代碼
透過指定三種不同類型的圖片比例 , 會如同瀑布流效果一樣自動排列版面 , 效果非常好 , 適合運用在各種應用上 (文章列表、商品、相簿列表..等等)



jquery頁籤分類圖片效果案例.rar (5.98 MB, 下載次數: 10, 售價: 15 S幣)

收藏回覆 只看該作者 道具 舉報

Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:sr.design2011@gmail.com

, Processed in 0.145427 second(s), 43 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2024-12-27 06:08

回頂部