頁籤式動態分類圖片導覽效果 , 透過jquery的視覺動態設計可以變成效果非常強烈的展示方式 , 圖片HOVER經過的時候可以顯示指定TITLE樣式以及簡單介紹 , 實用性非常高 ! 本案例帶有響應式設計 , 可以透過縮放瀏覽器視窗大小看到頁面響應式效果:
簡易使用教學
本效果實際應用非常簡單,分成兩個設定步驟:
步驟一、設定頁籤的分類列表 , 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"
參考範例- <ul class="portfolio grid ">
- <li data-category="marketing" class="print photography item-wide">
- <a href="images/portfolio/image5-small.jpg" rel="prettyPhoto">
- <div class="grid-item-on-hover">
- <div class="grid-text">
- <h1>PICTURE TITLE [SR]</h1>
- </div>
- <span>photography, printing identity</span>
-
- </div>
- <img src="images/portfolio/image5-small.jpg" alt=" " />
- </a>
- </li></ul>
複製代碼 透過指定三種不同類型的圖片比例 , 會如同瀑布流效果一樣自動排列版面 , 效果非常好 , 適合運用在各種應用上 (文章列表、商品、相簿列表..等等)
jquery頁籤分類圖片效果案例.rar
(5.98 MB, 下載次數: 10, 售價: 15 S幣)
|