[JS]一覧表示のレイアウトを切り替えるスクリプト -Easy Display Switch

サイト構築 -JavaScript

サムネイルなどの一覧表示のレイアウトをスムーズなアニメーションで切り替えるスクリプトをDesign M.agから紹介します。

デモのキャプチャ

Easy Display Switch with CSS and jQuery
demo

表示の切り替えは、左上の「Switch View」から。
スムーズなアニメーションが気持ちいいです。

デモのキャプチャ

各画像、テキスト、キャプションは、リスト要素で実装されています。

<li>
<div class="content_block">
		<a href="#"><img src="sample.gif" alt="" /></a>
<h2><a href="#">Image Name</a></h2>

<!—Description here-->
</div>
</li>

表示切り替えの仕組みは、リストのスタイルを変更することで実装されており、スクリプトにはjquery.jsが使用されています。

スクリプトのイメージ図

Related Posts

Post on:2009年3月10日

Trackback

leave your Comments

©2011 coliss