[JS]一覧表示のレイアウトを切り替えるスクリプト -Easy Display Switch
Post on:2009年3月10日
sponsors
サムネイルなどの一覧表示のレイアウトをスムーズなアニメーションで切り替えるスクリプトをDesign M.agから紹介します。
Easy Display Switch with CSS and jQuery
demo
表示の切り替えは、左上の「Switch View」から。
スムーズなアニメーションが気持ちいいです。
各画像、テキスト、キャプションは、リスト要素で実装されています。
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <li> <div class="content_block"> <a href="#"><img src="sample.gif" alt="" /></a> <h2><a href="#">Image Name</a></h2> <p><!—Description here--></p> </div> </li> </textarea> |
表示切り替えの仕組みは、リストのスタイルを変更することで実装されており、スクリプトにはjquery.jsが使用されています。
sponsors
