iTunesのカバーフロー風UIをJavaScriptで実現「ProtoFlow」
2008年03月13日
スポンサード リンク
ProtoFlow first preview release… :: Deensoft
I got busy with few other client work and didn’t really get any chance to polish up the ProtoFlow widget.
iTunesのカバーフロー風UIをJavaScriptで実現「ProtoFlow」。
まずはデモページを見てみましょう
HTMLは次のようにシンプル
<div id="protoflow">
<img src="imgs/DSCN0940_91360.jpg"/>
<img src="imgs/stimme_von_oben_187192.jpg"/>
<img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
<img src="imgs/farbraum_012_147508.jpg"/>
<img src="imgs/IMG_4906_199357.jpg"/>
<img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
<img src="imgs/Fries_201253.jpg"/>
<img src="imgs/Fries_201253.jpg"/>
</div>
<ul id=”protoCaptions” class=”protoCaptions”>
<li>Caption 1</li>
<li>Caption 2</li>
<li>Caption 3</li>
<li>Caption 4</li>
<li>Caption 5</li>
<li>Caption 6</li>
<li>Caption 7</li>
<li>Caption 8</li>
</ul>
初期化も1行でOK
Event.observe(window, 'load', function() {
cf = new ProtoFlow($("protoflow"), {captions: 'protoCaptions'});
});
覚えておけば、カバーフローみたいなの作ってといわれたときに直ぐ作れますね。
prototype.js&script.aculo.usで実装.
スポンサード リンク
投稿者 KJ : 2008年03月13日 07:06
|
![]()
間違いの指摘をしていただける方はメールでお願いします
最新のブログ記事
- Facebook風のサムネイル付きサジェストボックスを実装するサンプル
- 2009年7月3日 管理人のブックマーク
- PHPとCSSで動的に綺麗なパーセンテージグラフを描画サンプル
- 普通の写真をすばらしいアートにするためのPhotoshopチュートリアル集
- シマシマの見やすいテーブルを作成するMooToolsプラグイン「ZebraTable」
- 2009年7月2日 管理人のブックマーク
- 「フォローしてね」を表すTwitterアイコン集
- シンプルなTwitter検索を行うためのPHPスクリプト
- PHPのcURLを使ってできる便利なサンプル集
- 2009年7月1日 管理人のブックマーク
- iPhone3.0の緯度経度APIで移動履歴を地図描画するサンプル





















