blog | SevenStyleWeb

javascriptのライブラリのmootools。これをつかったスライドボックスの面白いやつを見つけた。その名もmooSlideBox3（もう３かい！）

ちょっと解説をしましゅ。

まずはmootoolsの中身をとりあえず全部とmooSlideBox3をダウンロードします。それを適当なフォルダに入れます。

HTML側で、

<script language="javascript" type="text/javascript" src="common/js/mootools.js"></script>
<script language="javascript" type="text/javascript" src="common/js/mooSlideX.js"></script>

で両方のjavascriptを読み込みます。

スライドさせるコンテンツですが画像をスライドインさせるとき（といっても画像しかいかないけど）

<a href="hoge.jpg" rel="designSlide" title="Sample::testtest text">Slide</a>

と書きます。

mooSlideBox3を使うときは、rel属性にdesignSlideと記載します。title属性には、スライドインしてくるレイヤーに記載されるテキストを記載します。その際、タイトル部分と本文部分を分ける意味で、::（コロン２つ）を記載。これが区切り文字になります。

ものによっては、title属性では事足りないことがあります。
そのときは、その後に<div>タグなどで追記情報を記載します。

<div id="mycontent">
        <h2>test test test</h2>
        <p>テストストテストテストテストテストテスト</p>
</div>

上記のように追記情報を記載し、そのid属性の値（今回はmycontent）を先ほどのaタグにrev属性を書き加えます。

<a href="hoge.jpg" rel="designSlide" rev="mycontent" title="Sample::testtest text">Slide</a>

これで、追記情報も表示されるようになります。
ただし、ここで注意ですが、rev属性の部分は、追記情報がない場合記載をするとエラーになり大本すら動かなくなります。

画像表示を表現するのに結構おもしろいエフェクトじゃないでしょうか・・。

ちょっと使ってみたいのでした。