skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

画像を左右にスクロールさせられるJavaScript「jQuery Smooth Div Scroll」

｜ ｜ ｜ ｜ ｜ ｜ ｜

画像ギャラリーを作る際にLightBoxを使用する人は多いでしょう。
しかし飽き飽きしている人も多いのも確かです。
たまにはjQuery Smooth Div Scrollのように左右にスクロールさせるのはいかがでしょか？

使用方法
jQuery Smooth Div Scrollからjquery.smoothDivScroll-0.6.jsや画像、CSSファイルを、jQueryからjquery.jsをダウロードしましょう。
またjquery.scrollToからjquery.scrollTo.jsをダウロードします。
<link rel="stylesheet" type="text/css" href="smoothDivScroll.css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="jquery.smoothDivScroll-0.6.js"></script>
<script language="JavaScript" type="text/javascript">
$(function() {
$("#id名).smoothDivScroll({mouseDownSpeedBooster: 2});
});
</script>

さらにCSSに追記します。
#id名 div.scrollableArea * {position: relative;float: left;margin: 0;padding: 0;}
あとはスクロールさせたい画像を上記指定のidでくくります。
<div id="id名">
<div class="scrollingHotSpotLeft"></div>
<div class="scrollingHotSpotRight"></div>
<div class="scrollWrapper">
<div class="scrollableArea">
<img src="画像パス" />
//画像分
</div>
</div>
</div>

上記で完成です。
下のサンプルでは、透過したグレーをホバーポイントにかけています。

画像を左右にスクロールさせられるJavaScript「jQuery Smooth Div Scroll」サンプル

記事作成：2009年03月06日

前の記事：JavaScriptライブラリ「mootools」でテキストにエフェクトをかける
次の記事：ナンバリングされた脚注を簡単に作成できるJavaScript「jQuery Footnotes」