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");が便利。