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

mootoolsで、いい感じに横スクロールするJavaScript「mooHorizonSlider」

｜ ｜ ｜ ｜ ｜ ｜ ｜

ECなどではスペースの有効活用のため、また楽しさを醸し出すために横スクロールさせる手法が多く見られます。
今回はそれをJavaScriptライブラリのmootoolsを使用して可能にした「mooHorizonSlider」を紹介します。

使用方法
mooHorizonSliderのDOWNLOADからファイル一式をダウンロードします。
<script language="javascript" type="text/ecmascript" src="mootools.js"></script>
<script language="javascript" type="text/ecmascript" src="artViperSlider.js"></script>

上記を記述したら、画像を表示するスペースを以下のように記述します。 <div id="container">
<div id="content">
<div id="scroller">
<div id="leftControl"><img src="scroller_left_img.jpg" id="leftClicker"/><img src="scroll_ff_left.jpg" width="15" height="89" id="leftFF"/></div>
<div id="outerScroller" >
<div id="innerScroller">
<img src="画像パス">
<img src="画像パス">
</div>
</div>
<div id="rightControl"><img src="scroller_right_img.jpg" id="rightScroller" /><img src="scroll_ff_right.jpg" id="rightFF" /></div>
</div>
</div>
</div>
<script language="javascript" type="text/ecmascript">
window.addEvent('domready',function(){
var barservice = 0;
var fass = 0;
var p = $$('.fadein');
p.each(function(el){
el.effect('opacity',{ duration:2500, wait:false, transition:Fx.Transitions.Back.easeOut }).start(0,1);
})
var p = new avScroll({container:'innerScroller', imgWidth:画像幅, scrollRange:スクロール画像数, leftHandle:'leftClicker',rightHandle:'rightScroller', rw:'leftFF', ff:'rightFF', speed:700});
})
</script>
mootoolsで、いい感じに横スクロールするJavaScript「mooHorizonSlider」サンプル

記事作成：2008年11月09日

前の記事：1.3 KBの軽量アコーディオンJavaScript「JavaScript Accordion」
次の記事：jQueryでファンシーなLightBoxクローンを作る「Fancy Zoom」