使用jQuery插件filtrify實現的超酷動態標籤分類摩托車新款展現

日期：2012-5-2  來源：GBin1.com

在線演示1  在線演示2  本地下載

你們在開發過程當中每每須要有效的展現不一樣類別下的圖片或者文字內容，這個過程當中你可能須要使用不一樣的標籤來過濾不一樣類別下的圖片內容，或者提供給用戶一個方便的方式來選擇不一樣的列別。今天咱們這裏將使用jQuery插件 - filtrify來快速精緻的實現一個超酷的摩托車分類展現應用，你們能夠看到使用filtrify來使用標籤分類顯示圖片是多麼的簡單，並且使用isotype來生成動畫展現特效，但願你們喜歡！

這個插件使用了不少僞類，例如:after和:before，若是你不熟悉它，能夠看看這篇文章，但願對你們有幫助！

注意IE8須要指定!DOCTYPE來支持僞類:after和before中的"content「屬性，同時若是你須要支持IE7，你能夠考慮使用IE7.js。

HTML代碼

在HTML代碼中，咱們使用HTML5的data屬性來定義類別，以下：

<ul id="container">
    <li data-tag="Ducati"><strong>Hypermotard 796 Silver</strong><img src="img/motor/Model-Page_2012_Hypermotard_796_298.jpg"><span>Ducati</span></lspan>
    <li data-tag="Ducati"><strong>Hypermotard 796 Red</strong><img src="img/motor/HM-796_2001_R_[298x168].jpg"><span>Ducati</span></lspan>
    <li data-tag="Ducati"><strong>Hypermotard 1100 Evo Red</strong><img src="img/motor/2012-Ducati-Hypermotard-1100EVO4-298.jpg"><span>Ducati</span></lspan>
    <li data-tag="Ducati"><strong>Streetfighter 848</strong><img src="img/motor/Color_SF-848_R_NC_298x168.jpg"><span>Ducati</span></lspan>
    <li data-tag="Ducati"><strong>Diavel Carbon</strong><img src="img/motor/Model-Page_2012_Hypermotard_796_298.jpg"><span>Ducati</span></lspan>
    <li data-tag="BMW"><strong>BMW K1300S HP</strong><img src="img/motor/2012-BMW-K1300SHPb-298x168.jpg"><span>BMW</span></lspan>
    <li data-tag="BMW"><strong>2012 BMW G650GS</strong><img src="img/motor/2012-BMW-G650GSd-298x168.jpg"><span>BMW</span></lspan>
    <li data-tag="Beneli"><strong>Tre-K 1130 Amazonas</strong><img src="img/motor/2012-Benelli-TreK1130Amazonas1-298x168.jpg"><span>Beneli</span></lspan>
    <li data-tag="KTM"><strong>2012 KTM 1190 RC8R</strong><img src="img/motor/2012-KTM-1190RC8R4-298x168.jpg"><span>KTM</span></lspan>
    <li data-tag="KTM"><strong>012 KTM 990 Duke R</strong><img src="img/motor/2012-KTM-990DukeR4-298x168.jpg"><span>KTM</span></lspan>
    <li data-tag="Bimota"><strong>DB10B Motard</strong><img src="img/motor/2012-Bimota-DB10BMotard1-298x168.jpg"><span>Bimota</span></lspan>
    <li data-tag="Yamaha"><strong>DB10B Motard</strong><img src="img/motor/2012-Yamaha-YZFR1d-298x168.jpg"><span>Yamaha</span></lspan>
    <li data-tag="Yamaha"><strong>VMAX / VMX17</strong><img src="img/motor/2012-Yamaha-VMAX-VMX17a-298x168.jpg"><span>Yamaha</span></lspan>
    <li data-tag="Honda"><strong>Honda CBR1000RR</strong><img src="img/motor/2012-Honda-CBR1000RRe-298x168.jpg"><span>Honda</span></lspan>
    <li data-tag="Suzuki"><strong>Hayabusa</strong><img src="img/motor/2012-Suzuki-Hayabusaa-298x168.jpg"><span>Suzuki</span></lspan>
    <li data-tag="Suzuki"><strong>V-Strom 1000 SE</strong><img src="img/motor/2012-Suzuki-VStrom1000SE1-298.x168.jpg"><span>Suzuki</span></lspan>
    <li data-tag="Kawasaki"><strong>Ninja ZX-14R</strong><img src="img/motor/2012-Kawasaki-NinjaZX14Ra-298x168.jpg"><span>Kawasaki</span></lspan>
    <li data-tag="Harley Davidson"><strong>XL883N Iron 883</strong><img src="img/motor/2012-Harley-Davidson-XL883N-Iron883z-298x168.jpg"><span>Harley Davidson</span></lspan>
</ul>

CSS

這裏咱們使用filterify的缺省css，而且添加isotope的css樣式定製，若是你沒有使用過isotope，請查看這篇文章，樣式代碼以下：

....

來源：使用jQuery插件filtrify實現的超酷動態標籤分類摩托車新款展現