jqueryとかでipod nanoみたいな見た目を

JavaScript jQuery CSS

JS（主にjquery）とCSS（少し適当…）を使ってiPod nano（第6世代）のメニューのようなものを見た目だけ作ってみた
スワイプはできない…

つくってみたやつ

横スクロールをJsでカーソル移動してそれっぽいものを作れたと思う。
「なるほどこうすればいいのかー」と思ったポイントをメモしておく


    • 横スクロールをするには

Cssで、横長の要素（メニュー）の高さと横幅を指定して

overflow-x:hidden; white-space: nowrap; (letter-spacing: -5px;)

その中に入る要素（メニューで選ぶ要素）の高さと横幅も指定して

display: inline-block; (letter-spacing: normal;)
    • Jsで横スクロール

横スクロール

$(メニュー要素).scrollLeft(630-($(メニュー要素).width()-630)/2);

アニメーションで横スクロール

$(メニュー要素).animate({scrollLeft: 630*(value+1)-( $(メニュー要素).width() -630)/2},"fast");

※ 630px:メニューで選ぶ要素の横幅

先頭と末尾の要素を透明度0に

filter: alpha(opacity=0); -moz-opacity:0.0; opacity:0.0;

先頭と末尾に空の要素を用意し、すべての要素が中心にして表示できるようにした。
メインに表示している要素の左右の要素にClickイベントを設定してスクロールするようにした

    • 影とか角丸
   box-shadow: 0px 20px 20px #333;

   border-radius: 50px;
   -webkit-border-radius: 50px;  
   -moz-border-radius: 50px;
    • jQueryのアニメーションについて

アニメーションの動きを設定する方法（参考にしたとこ）
エフェクトの動き、早さを設定できる

    • リサイズイベント

ウィンドウサイズが変更されてもメニューが中心に表示されるように、

$(window).resize(function(){ 変更した時に実行するないよう });


これらのポイントに躓きつつ作ってました。
つくってみたやつ