skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです
マウスホイールでもスクロールさせられるJavaScript：via jQuery TOOLS
｜
｜
｜
｜
｜
｜
要素をスクロールさせられるJavaScriptは結構ありますが、今回のようにマウスホイールでスクロールさせられるのはなかったのではないでしょうか。
jQuery TOOLS / Scrollable - Scroll your HTML with eye candyは高機能なスクロールJavaScriptです。
使用方法
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サンプル
記事作成：2009年07月31日
▼マウスホイールでもスクロールさせられるJavaScript：via jQuery TOOLSへのコメントはtwitterにて受け付けています。
twitterでコメントする
前の記事：JavaScriptでReTweetさせる「Easy Retweet Button」
次の記事：JavaScriptで短縮URLを実現する「jq-shorten」
