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

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

sponsors

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

記事作成:
記事URL:

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