memo:jQuery縦方向スクロール/要素切り替えサンプル - ニート=>ネトゲ屋=>ブラック=>電話屋

ぐりぐり動きます。切り替わります。pre要素好き。
emacsが書いてくれるDTDがよくわかっていません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1.3");</script>
</head>
<body>
<div id="wrapper">
<div id="head">
<h1>jQuery縦方向スクロール/要素切り替えサンプル</h1>
<pre>
そのまま動かす方はスタッフロールに見た目的によいのかも
・普通に動かすパターン
・切り替えパターン(divでもulでもliでも切り替え) intervalを調整したらjpg入れ替えでアニメgifみたいなことが出来ますね。
</pre>
<!--/ #head--></div>

<script>
/*divをそのまま動かすバージョン初期化*/
$(function(){
  setUpTateRoll("#roll",60,"<h1>ロール終了</h1>"); 
});
function setUpTateRoll(targdivID,interval,overhtmlstr){
  //タイマー
  var intervalRoll = setInterval(function(){
     //iterval(ms)ごとに1ずつ動かす(animateの速度は1とか適当な数値をいれる)
     $(targdivID).animate({scrollTop:$(targdivID).scrollTop() + 1},1);
     //スクロールが終わらせてもよいか?
     if($(targdivID).scrollTop() > $(targdivID).height()){
         clearInterval(intervalRoll);//タイマーストップ
         //消す=>中身書き換え(「ロール終了」)=>表示のアニメ
         $(targdivID).animate({
           opacity :0},
           {complete:function(){
               $(targdivID).html(overhtmlstr)
                         .animate({scrollTop:0,opacity:1},"slow");
                               },
         },"slow");//animate
       }//if
   },interval);//interval(ms)ごとに実行のタイマー
}


</script>
<style>
div#roll{
 background-color:lightgreen;/*確認用*/
 width:800px;
 height:200px;
 margin:0 auto;
 overflow:hidden;
}
</style>
<div id="roll">
<pre>
スタッフ
原作 - 片山憲太郎
原作イラスト - 山本ヤマト
監督・シリーズ構成・音響監督 - 松尾衡
助監督 - 山粼みつえ
キャラクターデザイン・総作画監督 - 石井久美
美術監督 - 荒井和浩
コスチュームデザイン - 藤純
色彩設計 - 古市裕一
撮影監督 - 大熊義明
音楽 - 村松健[14]
アニメーション制作 - ブレインズ・ベース
製作 - 「紅」製作委員会（集英社、ポニーキャニオン、読売広告社）

主題歌

オープニングテーマ「Love Jump」
    作詞 - 栗林みな実、作曲・編曲 - 菊田大介、歌 - 栗林みな実
エンディングテーマ「crossing days」
    作詞・作曲・編曲 - R・O・N、歌 - 新谷良子
エンディングテーマ（第8話）「手のひらの太陽」
    作詞・作曲・編曲 - R・O・N、歌 - 新谷良子

</pre>
<!--/ #roll--></div>

<div id="main">
<script>
/*documentの初期化*/
$(function(){
  setUpKirikae(".vsc",2000);
});

/*要素切り替え
 *targclassname:切り替え対象のclass
 *interval     :書き換えインターバル*/
function setUpKirikae(targclassname,interval){
  /*queに突っ込んでringで回す作戦*/
  $(targclassname).each(function(){
     var que = [];
     $(this).find("div,ul,li").each(function(){
        que.push($(this));
     });
    //無限ループ
     var cou = 0;
     setInterval(
      function(){
        var targ = (cou++ % que.length);
        /*displayでもfadeでも好き方をドウゾ*/
        que[targ].attr({"style":"display:block;"});
//        que[targ].fadeIn("slow");
        if(targ > 0)//前のulを消す
          que[targ - 1].attr({"style":"display:none;"});
//          que[targ - 1].fadeOut("slow");
        if(targ == 0)//(最初==)最後の時は最後の要素を消す
          que[que.length - 1].attr({"style":"display:none;"});
//          que[que.length - 1].fadeOut("slow");
        }
     ,interval);
  });
}
</script>

<style>
*{
 margin:0;
 padding:0;
}
div#wrapper {
  width:1000;
  margin:0 auto;
  background-color:pink;/*確認用*/
}
div#main{
 width:1000px;
 height:300px;
 overflow:hidden;
 margin:0 auto;
}
div#main:after{
  clear:both;/*効☆か☆な☆い*/
}
div.vsc{
  border:1px solid;/*確認用*/
  background-color:lightgreen;/*確認用*/
  width:495px;
  float:left;
}
div.vsc ul{
  font-size:5em;
  font-weight:bold;
  display:none;
}
div.vsc div{
  font-size:1em;
  font-weight:bold;
  display:none;
}
div#wrapper:after{
  clear:both;
}
div#footer{
  clear:both;
  width:100%;
}
</style>
<div class="vsc">
<ul>中身がul</ul>
<ul>監督 - カサヰケンイチ</ul>
<ul>シリーズ構成 - 高山文彦</ul>
<ul>キャラクターデザイン - 音地正行</ul>
<ul>サブデザイン - 冷水由紀絵</ul>
<ul>美術監督 - 小林七郎</ul>
<ul>色彩設計 - 石田美由紀</ul>
<ul>撮影監督 - 大河内喜夫</ul>
<ul>音響監督 - 明田川仁</ul>
<ul>OPアニメーション絵コンテ・演出 - 幾原邦彦</ul>
<ul>音楽 - 羽毛田丈史</ul>
<ul>プロデューサー - 浅香敏明、松倉友二、山本幸治、斎藤彩</ul>
<ul>アニメーション制作 - J.C.STAFF</ul>
<ul>制作 - 青い花製作委員会</ul>
<ul></ul>
<ul>オープニングテーマ「青い花」</ul>
<ul>    作詞・作曲 - 山崎ゆかり、編曲・歌 - 空気公団</ul>
<ul>エンディングテーマ「センティフォリア」</ul>
<ul>    作詞 - Ceui、作曲 - 小高光太郎・Ceui、編曲 - 小高光太郎、歌 - Ceui</ul>
</div>
<div class="vsc">
<div>中身がdiv</div>
<div>監督 - 橘正紀</div>
<div>シリーズ構成 - 高橋ナツコ</div>
<div>キャラクターデザイン - 野崎あつこ</div>
<div>セットデザイン - 植田均</div>
<div>3D監督 - 井野元英二</div>
<div>美術監督 - 中島美佳、小木斉之</div>
<div>色彩設計 - 加藤里恵</div>
<div>撮影監督 - 大神洋一</div>
<div>音響監督 - たなかかずや</div>
<div>音楽 - 大谷幸</div>
<div>プロデューサー - 尾崎紀子、松家雄一郎</div>
<div>アニメーション制作 - ボンズ、キネマシトラス[1]</div>
<div>制作 - 東京マグニチュード8.0製作委員会</div>
<div>オープニングテーマ</div>
<div>    abingdon boys school 「キミノウタ」（作詞：西川貴教、作曲：柴崎浩、編曲：abingdon boys school）</div>
<div>エンディングテーマ</div>
<div>    辻詩音 「M/elody」（作詞・作曲：辻詩音、編曲：mw）</div>
</div>
<!--/  #main--></div>

<div id="footer">
<hr>

<p class="noindent">リンクはご自由にどうぞ。

</p><p class="noindent">
<!-- hhmts start -->
Last modified: Sun Sep 13 03:18:18 JST 2009
<!-- hhmts end -->
<!--/  #footer--></div>

<!--/  #wrapper--></div>
</body>
</html>
うまくうごくといいのだけれど。