実は以前、ZDNet Japan エンタープライズ / Tips for HTMLというところに元ネタがありましたが、今はありません。モノ自体は面白いものだったこともあって、著者さんの許可を得てここに掲載していました。今はもっぱらアーカイブの意味で残しています。
ソースは多少自分が手を加えたところもありますが、ページを動かすアルゴリズムはそのまんまだったりします。^^; 基本的なメソッドしか使っていないため、汎用性が高いのが特徴。JavaScriptに対応したブラウザであればほとんど動作するハズです。
ただ、レイアウトを含め「どのように見せるか」が問題かもしれません。ウィンドウの横幅は固定したくなるので、別窓を開いたり、幅を固定したフレームに読み込むことになるでしょう。その際、ブラウザによって微妙に調整具合が異なるので注意が必要です。スクロールバーの表示/非表示なども慎重に。
→サンプル ※別窓が開きます
下のソースをHEADブロック内にコピー＆ペーストし、slidePageTo() / slidePageBy() を使って呼び出します。slidePageTo() は絶対移動、slidePageBy()は相対移動になります。
とまあ、こんな感じ。テキトウな説明ですみません。^^;
<script type="text/javascript">
<!--
var moveID = false;
var pos = 0;
function slideMe_left(n) {
pos += Math.ceil((n-pos)*0.07);
self.scroll(pos,0);
if ((n-pos) <= 1) {
pos = n;
self.scroll(n,0);
clearTimeout(moveID);
moveID = false;
return;
}
moveID = setTimeout("slideMe_left(" + n + ")",0);
}
function slideMe_right(n) {
pos -= Math.ceil((pos-n)*0.07);
self.scroll(pos,0);
if (Math.abs(n-pos) <= 1) {
pos = n;
self.scroll(n,0);
clearTimeout(moveID);
moveID = false;
return;
}
moveID = setTimeout("slideMe_right(" + n + ")",0);
}
function slidePageTo(n) {
if(!moveID) {
var d = (n>pos)? "left" : "right";
var f ="slideMe_"+ d +"(" + n + ")";
moveID = setTimeout(f,0);
}
}
function slidePageBy(n) {
if(!moveID) {
var d = (n>0)? "left" : "right";
var f ="slideMe_"+ d +"(" + (pos+n) + ")";
moveID = setTimeout(f,0);
}
}
//-->
</script>