マウスホイールでもスクロールさせられるJavaScript:via jQuery TOOLS

要素をスクロールさせられるJavaScriptは結構ありますが、今回のようにマウスホイールでスクロールさせられるのはなかったのではないでしょうか。
jQuery TOOLS / Scrollable - Scroll your HTML with eye candyは高機能なスクロールJavaScriptです。
マウスホイールでもスクロールさせられるJavaScript:via jQuery TOOLSサンプル

使用方法
jQuery TOOLSからjquery.tools.jsをダウンロードします。
また、マウスホイールプラグインもダウンロードします。
<script type="text/javascript" src="jquery.tools.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$(".scrollable").scrollable();
});
</script>

次にhtmlを以下のように記述します。
<div class="navi"></div>
<a class="prev"></a>
<div class="scrollable">
<div class="items">
<div>0</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div>
<div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div>
<div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div>
</div>
</div>
<a class="next"></a>

CSSで見た目を整えれば完成です。
div.scrollable { position:relative; overflow:hidden; width: 660px; height:114px; padding:10px 0; border:1px outset #ccc; background-color:#efefef; }
div.scrollable div.items { width:20000em; position:absolute; clear:both; margin-left:10px; }
div.scrollable div.items div { float:left; text-align:center; width:110px; padding:25px 0px; font-size:30px; font-family: 'bitstream vera sans'; border:1px outset #ccc; background-color: #ddd; margin-right: 20px; -moz-border-radius:5px; }
div.scrollable div.items div.active { border:1px inset #ccc; background-color:#fff; }
div.scrollable { position:relative; overflow:hidden; width: 660px; height:114px; padding:10px 0; border:1px outset #ccc; background-color:#efefef; }
div.scrollable div.items { width:20000em; position:absolute; clear:both; margin-left:10px; }
div.scrollable div.items div { float:left; text-align:center; width:110px; padding:25px 0px; font-size:30px; font-family: 'bitstream vera sans'; border:1px outset #ccc; background-color: #ddd; margin-right: 20px; -moz-border-radius:5px; }
div.scrollable div.items div.active { border:1px inset #ccc; background-color:#fff; }
div.scrollable { float:left; }
a.prev, a.next, a.prevPage, a.nextPage { display:block; width:18px; height:18px; background:url(left.png) no-repeat; float:left; margin:43px 10px; cursor:pointer; font-size:1px; }
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover { background-position:0px -18px; }
a.disabled { visibility:hidden !important; }
a.next, a.nextPage { background-image:url(right.png); clear:right; }
div.navi { margin-left:328px; width:200px; height:20px; }
div.navi a { width:8px; height:8px; float:left; margin:3px; background:url(navigator.png) 0 0 no-repeat; display:block; font-size:1px; }
div.navi a:hover { background-position:0 -8px; }
div.navi a.active { background-position:0 -16px; }

マウスホイールでもスクロールさせられるJavaScript:via jQuery TOOLSサンプル

sponsors

「マウスホイールでもスクロールさせられるJavaScript:via jQuery TOOLS」をシェアする

記事作成:
記事URL:

TOP > > > マウスホイールでもスクロールさせられるJavaScript:via jQuery TOOLS