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」

関連記事

• [mootools]mooVRotatingMenu
• [mootools]click the birds
• [mootools]Image Menu
• スクロールさせるjavascript「iscroll」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」

• チラ見せしちゃうJavaScript「Page Peel」
• 入力内容の絞込みを行うJavaScript「Live Filter」
• JavaScriptライブラリ「jQuery」で、いい動きのスライダーを作る「Start/Stop Slider」
• お手軽にタブ切り替えを行うJavaScript「Spotlight」
• 2008年アクセスランキング
• jQueryプラグイン「pikachoose」で小気味良いスライドショーを作る
• jQueryで画像に反射効果を！「Reflection.js for jQuery」
• jQueryでニュースティッカーを作成するJavaScript「JqNews」
• JavaScriptライブラリ「jQuery」でカレンダーを表示する「dynDateTime」
• 画像のキャプションをクールに表示するJavaScript「jQuery Captify Plugin」