ポインタを合わせるだけでボックス内を水平に動くようにするCSSとMootoolsのあわせ技

ちょっとしたサイトのアクセサリーとして使えそうな感じです。
サンプルはこちら
灰色のボックス内のはじっこにマウスを持っていくと、ボックス内だけがスクロールし始めます。

詳細は以下で。

コードは結構簡単

以下のようにmootools.svn.jsを読み込みます。

<script type="text/javascript" src="mootools.svn.js"></script>

以下も、bodyタグの前に挿入

<script type="text/javascript">
window.addEvent('domready', function(){
var scroll = new Scroller('container', {area: 100, velocity: 1});
$('container').addEvent('mouseover', scroll.start.bind(scroll));
$('container').addEvent('mouseout', scroll.stop.bind(scroll));
});
</script>

html部はこんな感じ。

<div id="container">
<div class="slider">
... add some HML sections here...
</div>
</div>

<div id="container">
<div class="slider">
<div class="section">section 1 content</div>
<div class="section">section 2 content</div>
<div class="section">section 3 content</div>
<div class="section">section 4 content</div>
<div class="section">section 5 content</div>
</div>
</div>

CSSに関しては、公開サイトの方で確認してみてください。
わずか数行です。

サンプルセットがダウンロードもできます。
woork: Using CSS and Mootools to simulate Flash horizontal navigation effect