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

マウスホイールでもスライドするJavaScript「horinaja for scriptaculous or jQuery」

｜ ｜ ｜ ｜ ｜ ｜ ｜

最近のマウスにはホイールがついていることも多いので、スライドさせるJavaScriptでもこれが使えると便利です。
horinaja for scriptaculous or jQueryではこれをjQueryまたはscriptaculousで実現可能です。
今回はjQueryで。

使用方法
horinaja for scriptaculous or jQueryからclass.horinaja.jquery.js、horinaja.cssをjQueryからjquery.js、MOUSE WHEEL EXTENSIONからjquery.mousewheel.jsをダウンロードします。
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.mousewheel.js" type="text/javascript"></script>
<script src="class.horinaja.jquery.js" type='text/javascript'></script>
<link rel="stylesheet" href="horinaja.css" type="text/css" media="screen" />
<script language="javascript" type="text/javascript">
$(function() {
$('#id名').Horinaja({
capture:'id名',
delai:0.3, //次に移る速度
duree:4, //次に移る時間
pagination:true //ページネーション
});
});
</script>

あとは以下のように記述すれば完成です。
<div id="id名" class="horinaja">
<ul>
<li>content 1</li>
<li>content 2</li>
<!-- 以下個数分 -->
</ul>
</div>

マウスホイールでもスライドするJavaScript「horinaja for scriptaculous or jQuery」サンプル

記事作成：2009年08月07日

前の記事：パスワード入力のユーザビリティ向上を「iPhone-like password fields using jQuery」
次の記事：長くなったコードをJavaScriptでぐいっと伸ばす via:Making an Expanding Code Box