アークウェブのブログ

このサイトでは、有名なCoverFlow(カバーフロー)インターフェイスを再現しています。
カテゴリの画像を横に並べて、それを囲むdiv内に横幅固定のスタイルを指定します。

<div id="pb-productbrowsercontainer" style="overflow: hidden;">

overflow: hiddenのスタイルシートは、はみ出た部分を非表示でクリッピングしています。 また、hiddenを指定することで、ブラウザのスクロールバーを表示させないようにしています。

▼overflow - W3C (英語)
http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow

その下のスライダーはscript.acluo.usのSliderクラスを使っており、バーをドラッグ・ドロップすると、それに応じてカテゴリ内の画像を移動させるイベントハンドラを呼び出すようにしています。
カテゴリ内の画像の移動は、style.left を変更することで実装されています。

また、スライダーのバー以外の箇所をクリックした時のイベントハンドラもセットされています。

▼スライダー - script.aculo.us (英語)
http://wiki.script.aculo.us/scriptaculous/show/Slider

◆生成の例◆

new Control.Slider('スライダーバーのID',
　　　　　　'スライダー背景のID',
　　　　　　{onSlide:バーをドラッグ中のイベントハンドラ,
　　　　　　onChange:バーをドロップするか、背景クリック時のイベントハンドラ
　　　　　　});
バーをドラッグのイベントハンドラ = function(value) {
　var x = ... ; // valueは 0?1 を返す
　　　　　　　// valueから何らかの変換をかける部分が ... で、結果を x とする
　$('画像を並べたのをまとめたdivのID').style.left = x + 'px';
};

関連リンク：
▼Control.Slider - スライダーコントロールを設定
http://javascriptist.net/ref_scriptaculous/control.slider.html

上記以外の{Option}部分について確認できます。

このような感じで、簡単ながら実装の一部の説明をしていきたいと思います。
次回は、下記の２つのお題について説明する予定です。

「お題２＞見入ってしまうエフェクトのあるサイト」
「お題３＞画面スペース無限大のサイト」

それでは次回もお楽しみに！