クールなスライドjavascript「MouseWheelBodyScroll」

使用方法

ちょっと読みにくいですが、ページをめくって読んでください。

手順1

以下のコードをダウンロードし、headに加えてください。

<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/moo.extend.js" type="text/javascript"></script>
<style type="text/css">
* {margin:0px;padding:0px}
#container {float:left;margin-top:10px}
.scrolling-content {background-color:#fff;position:absolute;padding:15px 30px}
</style>

手順2

3つのjavascriptを埋め込みます。
申し訳ありませんが、ソースを参照してください。

手順3

ベースHTML

<div id="container">
<div style="height: 400px; width: 100%; overflow:hidden; position:absolute" id="tile-wrap">
<div style="width: 6810px; height: 1704px; background-image: url(tile2.jpg); position: relative;" id="tile-inner">
<!-- 中身（手順4参考） -->
</div>
</div>
</div>

手順4

中身HTML

<div id="contentN" class="scrolling-content" style="left: 10px; top: 100px;">
<h3>ページタイトル</h3>
<p>中身</p>
</div>

なお、styleは2ページ目から1024pxずつ加えていきます。

手順5

テキストアンカーリンク

<div style="position:absolute; top:Npx; left:Npx;width:100%">
<a href="#" onMouseover="panel.clearTimer().toElement($('contentN')); return false;">タイトル名</a>
</div>