category
サイト構築 -JavaScript

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

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

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

デモのキャプチャ

Easy Display Switch with CSS and jQuery
demo

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

デモのキャプチャ

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

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

スクリプトのイメージ図

Post on:2009年3月10日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

ページの先頭へ




© coliss

RSS