特效介绍
jquery实现点击排序按钮,图标自动排列的特效。本特效不兼容IE6。
使用方法
1、引入5imoban.css、ie7.css、jquery-1.4.1-and-plugins.min.js、main.js2、把以下代码拷贝到你想引用的地方
<UL class=splitter> <LI>Filter by type: <UL> <LI class="segment-1 selected-1"><A href="#" data-value="all">Everything</A></LI> <LI class=segment-0><A href="#" data-value="app">Applications</A></LI> <LI class=segment-2><A href="#" data-value="util">Utilities</A></LI></UL></LI> <LI>Sort by: <UL> <LI class="segment-1 selected-1"><A href="#" data-value="name">Name</A></LI> <LI class=segment-2><A href="#" data-value="size">Size</A></LI></UL></LI></UL> <DIV class=demo><!-- read the documentation to understand what’s going on here --> <UL id=list class=image-grid> <LI class=util data-id="id-1"><IMG alt="" src="images/activity-monitor.png" width=128 height=128> <STRONG>Activity Monitor</STRONG> <SPAN>348 KB</SPAN> </LI> <LI class=app data-id="id-2"><IMG alt="" src="images/address-book.png" width=128 height=128> <STRONG>Address Book</STRONG><SPAN>1904 KB</SPAN> </LI> <LI class=app data-id="id-3"><IMG alt="" src="images/finder.png" width=128 height=128> <STRONG>Finder</STRONG> <SPAN>1337 KB</SPAN> </LI> <LI class=app data-id="id-4"><IMG alt="" src="images/front-row.png" width=128 height=128> <STRONG>Front Row</STRONG> <SPAN>401 KB</SPAN> </LI> <LI class=app data-id="id-5"><IMG alt="" src="images/google-pokemon.png" width=128 height=128> <STRONG>Google Pokémon</STRONG> <SPAN>12875 KB</SPAN> </LI> <LI class=app data-id="id-6"><IMG alt="" src="images/ical.png" width=128 height=128> <STRONG>iCal</STRONG> <SPAN>5273 KB</SPAN> </LI> <LI class=app data-id="id-7"><IMG alt="" src="images/ichat.png" width=128 height=128> <STRONG>iChat</STRONG> <SPAN>5437 KB</SPAN> </LI> <LI class=app data-id="id-8"><IMG alt="" src="images/interface-builder.png" width=128 height=128> <STRONG>Interface Builder</STRONG> <SPAN>2764 KB</SPAN> </LI> <LI class=app data-id="id-9"><IMG alt="" src="images/ituna.png" width=128 height=128> <STRONG>iTuna</STRONG> <SPAN>17612 KB</SPAN> </LI> <LI class=util data-id="id-10"><IMG alt="" src="images/keychain-access.png" width=128 height=128> <STRONG>Keychain Access</STRONG> <SPAN>972 KB</SPAN> </LI> <LI class=util data-id="id-11"><IMG alt="" src="images/network-utility.png" width=128 height=128> <STRONG>Network Utility</STRONG> <SPAN>245 KB</SPAN> </LI> <LI class=util data-id="id-12"><IMG alt="" src="images/sync.png" width=128 height=128> <STRONG>Sync</STRONG> <SPAN>3788 KB</SPAN> </LI> <LI class=app data-id="id-13"><IMG alt="" src="images/textedit.png" width=128 height=128> <STRONG>TextEdit</STRONG> <SPAN>1669 KB</SPAN> </LI></UL></DIV>