memo:横フロートdivのスライドサンプル

http://tokyo-m8.com/episode.shtml
が素直でイイナァと思ったので横フロートにしたdivのスライド部分だけ抜き出したメモ。
すてきなjquery.scrollableというプラグインを使ってますが、
手で書いてみた。スライドだけならものすごく簡単。
すてきなプラグインのすてきなマウスホイールがすてきなのですが、これはめんどくさそうなので。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery","1.3");</script>
    <title>横ずらしサンプル</title>
</head>
<body>
<style>
*{
  /*見やすいように*/
  border:1px solid;
}
/*必要な指定*/
#scrollable{
  position:   relative;
  overflow:   hidden;
  width:      730px;
  height:     120px;
}
#scrollable #scrollable-items{
  width:      20000em;/*でっかい数*/
  position:   absolute;
}
#scrollable #scrollable-items .scrollable-item{
    float:left;
}
#scrollable .episode-item{
  width:730px;
}
#scrollable .active{
  font-size:2em;
}
</style>
<script>
/*横幅固定でfloat:leftなdivを横に固定幅ずつずらします
  targdivname ずらす対象
  selectadivname セレクタ
  divwidth それぞれitemの横幅
  onclassname <li><a />って成ってるときのliに適用するアクティブな状態を示すためのcssクラス
*/
function setupHorizontalScroll(targdivname,selectadivname,divwidth,onclassname){
    //クリックイベント登録
	$(selectadivname).find('a').click(function(){
                //移動距離
		var pix = -1 * divwidth * ($(this).attr('id').replace("select","") - 1);
        //アニメーション 半透明させてスライド、半透明を戻し
		$(targdivname)
			.animate({
				left:pix,
				opacity:0.4
				},500,"swing")
			.animate({opacity:1.0},200,"swing");
        //セレクトしたliのクラスを変える
		$(selectadivname).find("li").each(function(){$(this).attr("class","");});
		$($(this).parent().get(0)).attr("class",onclassname);
        //a要素のデフォルト動作を殺す
		return false;
	});
}
//登録
$(function(){
	setupHorizontalScroll('#scrollable-items','#episodeSelect',730,"active");
});
</script>
 <div id="scrollable" >
     <div id="scrollable-items" >
         <div class="episode-item scrollable-item"><h1>scroll_1</h1></div>
         <div class="episode-item scrollable-item"><h1>scroll_2</h1></div>
         <div class="episode-item scrollable-item"><h1>scroll_3</h1></div>
         <div class="episode-item scrollable-item"><h1>scroll_4</h1></div>
	 <div class="episode-item scrollable-item"><h1>scroll_5</h1></div>
	 <div class="episode-item scrollable-item"><h1>scroll_6</h1></div>
	 <div class="episode-item scrollable-item"><h1>scroll_7</h1></div>
	 <div class="episode-item scrollable-item"><h1>scroll_8</h1></div>
	 <div class="episode-item scrollable-item"><h1>scroll_9</h1></div>
     </div>
     <!-- /#scrollable-items -->
</div>
<!-- /#scrollable -->
<div>
    <ul id="episodeSelect">
        <li><a id="select1" href="">1話(href=""でマウスポインタ変わる)</a></li>
        <li><a id="select2" href>2話(ffだとhrefだけでも変わる)</a></li>
        <li><a id="select3">3話(でもvalidationに怒られそうですね。。。)</a></li>
        <li><a id="select4">4話</a></li>
        <li><a id="select5">5話</a></li>
        <li><a id="select6">6話</a></li>
        <li><a id="select7">7話</a></li>
        <li><a id="select8">8話</a></li>
        <li><a id="select9">9話</a></li>
    </ul>
</div>
</body>
</html>

冒頭のサイトはcssとかすごく勉強になった。。。ってか初めてcssとにらめっこした気がする。
本当にテンプレートみたいなサイトです。
firebugのconsole.log("message");が便利。