JQuery 頁籤式動態分類圖片導覽效果 (帶響應式設計範例)

byadmin 發表於 2013-6-12 17:07:58 , 10152人已閱讀 , 0人回應

頁籤式動態分類圖片導覽效果 , 透過jquery的視覺動態設計可以變成效果非常強烈的展示方式 , 圖片HOVER經過的時候可以顯示指定TITLE樣式以及簡單介紹 , 實用性非常高 ! 本案例帶有響應式設計 , 可以透過縮放瀏覽器視窗大小看到頁面響應式效果：

DEMO

簡易使用教學

本效果實際應用非常簡單，分成兩個設定步驟：
步驟一、設定頁籤的分類列表 , data-option-value可自訂頁籤分類 , 全部分類則是參考第一條LI的類別寫法即可：
參考範例

<section id="options">
<ul id="home-filters" class="option-set clearfix" data-option-key="filter">
<li><a href="#filter" data-option-value="*" class="selected active">All</a></li>
<li><a href="#filter" data-option-value=".marketing">Marketing</a></li>
<li><a href="#filter" data-option-value=".photography">Photography</a></li>
<li><a href="#filter" data-option-value=".branding">Branding</a></li>
<li><a href="#filter" data-option-value=".print">Print</a></li>
<li><a href="#filter" data-option-value=".webdesign">Web Design</a></li>
</ul>
</section>

複製代碼

步驟二、帶入圖片列表 , 透過data-category="分類" 指定剛剛步驟一所設定的分類項目 , 另外本效果案例對於圖片處理有三種比例效果,可分別設定套用類別：
第一種是大圖式(550*450px) - class="print photography item-wide"
第二種是一般小圖(265*215px) - class="branding print item-small"
第三種是長條形(265*450px) - class="marketing webdesign item-high"

參考範例