JavaScript Market - 動きのあるホームページを作る為の各種JavaScript のサンプルと小技集を公開中

JavaScript

JavaScriptって…? | JavaScript応用のツボ | ブラウザについて | JavaScript Market 利用規程 | JavaScript 各種サンプル | JavaScript 小技集

横スクロールを使った改ページ効果

効果をわかりやすくするためにウィンドウサイズを800 x 600 にリサイズしています。

このサンプルはNetscape4ではスクロール幅に誤差が出ますが、
原因は縦スクロールバーが出ているためで、
実際に使用するときに縦スクロールバーが出ていなければ問題有りません

 ここは1ページ目です   ここは2ページ目です   ここは3ページ目です   ここは4ページ目です   ここは5ページ目です 

■ このスクリプトのソース
<script>
// 最大幅
max_width = 4000;

// 一度のクリックでスクロールさせる幅
slide_wid = 800;

// スクロールピッチ
offset = 40;

// スクロールスピード
speed = 10;

x = i = 0;
function side_scroll(p) {
   if (p) { x += slide_wid; mode = 1; }
   else { x -= slide_wid; mode = 2; }
   if (x >= max_width) { mode = 0; x = 0; }
   else if (x < 0) { mode = 0; x = max_width - slide_wid; }
   if (mode) slide();
   else self.scrollTo(x,0);
}

function slide() {
   if (mode == 1) self.scrollBy(offset,0);
   else if (mode == 2) self.scrollBy(-offset,0);
   if (++i < slide_wid / offset) setTimeout("slide()",speed);
   else i = 0 ;
}
</script>
<table cellpadding=0 cellspacing=0 width=4000>
<td width=800 align=center><a href="javascript:side_scroll(0)">←</a>
 ここは1ページ目です <a href="javascript:side_scroll(1)">→</a></td>
<td width=800 align=center><a href="javascript:side_scroll(0)">←</a>
 ここは2ページ目です <a href="javascript:side_scroll(1)">→</a></td>
<td width=800 align=center><a href="javascript:side_scroll(0)">←</a>
 ここは3ページ目です <a href="javascript:side_scroll(1)">→</a></td>
<td width=800 align=center><a href="javascript:side_scroll(0)">←</a>
 ここは4ページ目です <a href="javascript:side_scroll(1)">→</a></td>
<td width=800 align=center><a href="javascript:side_scroll(0)">←</a>
 ここは5ページ目です <a href="javascript:side_scroll(1)">→</a></td>
</table>


suepon.com | CGI作成・CGI制作 | ドメイン検索 | バナー自動作成 | Google Dance jp | 松浦亜弥 (H.P.memo) | パソコン | ネイル