コンテンツをスクロールできる「jsScroller」

Check このエントリーをはてなブックマークに追加

配布元：jsScroller
ライセンス：著作権表示さえすれば利用可

jsScrollerはマウスオーバーなどでスクロールするコンテンツを作成する為のJavaScriptライブラリです。

使い方

head要素などでダウンロードしてきたjsScroller.jsを読み込みます。

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

スクロールしたいコンテンツを任意のIDを付けたdiv要素で包みます。
スクロールしたいコンテンツにはScroller-Containerというclassを付加します。

<div id="任意のID">
  <div class="Scroller-Container">
    Insert Text here!
  </div>
</div>

次にscript要素を利用してjsScrollerの設定を行います。

<script type="text/javascript">
window.onload = function () {
  var el = document.getElementById("任意のID");
  scroller = new jsScroller(el, コンテンツの横幅, コンテンツの高さ);
}
</script>

スタイルシートでは以下のように指定しておきます。

<style type="text/css">
#任意のID{
  position: relative;
  width: コンテンツの横幅;
  height: コンテンツの高さ;
  overflow: hidden;
}
.Scroller-Container {
  position: absolute;
}
</style>

これで設定は完了です。

コンテンツを上にスクロールさせるボタンは以下のように記述します。

<a href="javascript:void(0)" onmouseover="scroller.startScroll(0, 5)" onmouseout="scroller.stopScroll();">▲</a>

コンテンツを下にスクロールさせるボタンは以下のように記述します。

<a href="javascript:void(0)" onmouseover="scroller.startScroll(0, -5)" onmouseout="scroller.stopScroll();">▲</a>

scroller.startScroll(X方向の移動速度, Ｙ方向の移動速度)と記述することによりコンテンツをスクロールさせる命令が記述できます。また、速度にマイナスを記述すると逆方向に移動します。

サンプル

スポンサードリンク

コメント

カテゴリー：スクロール ライブラリ