マウスウィールでも横スクロールするjavascript「horizontinyscrolling.js」

横スクロールのjavascriptでは、bookreadeer.jsなるものが人気です。
が、javascriptをoffにすると縦になっちゃいますし、そもそもスクロール時に矢印を利用する人は多いのでしょうか？
今回紹介するhorizontinyscrolling.jsはマウスに付いている「ぐるぐる」のマウスウィールでスクロール可能です。
これにより、縦スクロールと同じ感覚でページ送りができます。
もちろんjavascriptがoffでも横スクロールOK

使用方法

【目次】 STEP 1　STEP 2　STEP 3　STEP 4　STEP 5

STEP 1

Javascriptをダウンロード

とりあえずjavascriptがなければ始まりません。
horizontinyscrolling.jsからとってきましょう。
そして埋め込みます。
<script src="http://yourdomain/horizontinyscrolling.js" type="text/javascript"></script>

←トップに戻る

STEP 2

CSSを設定しましょう。

ひとつのコラムの横幅を決め、ページ数をかけたものを全体の横幅にします。
<style type="text/css">
#container {width: 3500px; height: 509px;} //ページ数かける1ページあたりの横幅（margin,padding含む）
.par {width: 500px; height: 500px; float: left; margin: 0px 30px 0 0;padding-left:30px;} //横幅500px
</style>

←トップに戻る

STEP 3

HTMLを書きましょう

<div id="container">
<div id="index" class="par">
1枚目
</div>
<div id="second" class="par">
2枚目
</div>
枚数分
</div>

←トップに戻る

STEP 4

リンクを張る

目次に各ページへのリンクを張ります。
<a href="#first">STEP 1</a>
<a href="#second">STEP 2</a>
<a href="#third">STEP 3</a>
<a href="#fourth">STEP 4</a>
<a href="#fifth">STEP 5</a>
＜戻る用＞
<a href="#index">←トップに戻る</a>

←トップに戻る

STEP 5

出来上がりを見ましょう

これで完成です。
サンプルはこのサイトです。

←トップに戻る