前の記事 ≪:2008年3月12日 管理人のブックマーク
次の記事 ≫:Flickrの写真ページで写真のみ強調できる「blackr」

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で実装.

関連の記事検索:JavaScript, Ajax, Webデザイン, coverflow, UI, javascript
スポンサード リンク

By.KJ : 2008年03月13日 07:06 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)