埋め込み
常に最新
<script type="text/javascript" src="http://nolib.kikisoftware.com/js/roller.min.js" ></script>
1.2.1
<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/roller.1.2.1.min.js" ></script>
1.2.0
<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/roller.1.2.0.min.js" ></script>
1.1.2
<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/roller.1.1.2.min.js" ></script>
1.1.1
<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/roller.1.1.1.min.js" ></script>
1.1.0
<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/roller.1.1.0.min.js" ></script>
1.0.0
<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/roller.1.0.0.min.js" ></script>
必要なライブラリ
概要
Rollerは横並びになった画像などの要素をスワイプやドラッグ操作で横移動させて見せるコンポーネントです。
viewとcontainerで構成され、containerの内部要素が横並びになり、かつ開始と終了がつながって表示されるので無限に回転して要素を見せる事ができます。内部要素は自動的にdisplay:block, float:leftが設定されます。
投げるような動作をしたときの動きを細かく指定することができます。
止まったときや左端の要素の入れ替えが発生したときにそれぞれのイベントハンドラを登録することができます。
Roller内部のスワイプ処理ではpreventDefaultを呼び出してのデフォルトイベントキャンセルはあえて行っていません。必要に応じて個別に設定するようにしてください。
初期状態の高速回転するモードやスワイプ操作はAndroidの一部の機種や古い端末だとtouchmoveイベントの発生間隔の問題から思ったような動きは再現できません。十分にテストをし、場合によってアニメーションレートの変更やボタン操作への変更を検討することをお勧めします。
- 1.2.1
- deprecate対応
- 1.2.0
- ライブラリが自動で登録したイベントハンドラを削除する関数を追加しました。
- 1.1.2
- コンテナの子要素が一つでもエラーとならないように修正しました。
- 1.1.1
- 各コールバック関数内からthis指定でrollerオブジェクトを取得することができます。
- 1.1.0
- 要素をコンテナの移動に伴って入れ替えする機能のオン/オフをコントロールする[rotation]を追加しました。
サンプル
ドラムロール










<--画像パスは書き換えてください--> <div id="samp1v" class="view" > <div id="samp1c" class="container"> <img src="img/roller/ig01.png" tag="01" /> <img src="img/roller/ig02.png" tag="02" /> <img src="img/roller/ig03.png" tag="03" /> <img src="img/roller/ig04.png" tag="04" /> <img src="img/roller/ig05.png" tag="05" /> <img src="img/roller/ig06.png" tag="06" /> <img src="img/roller/ig07.png" tag="07" /> <img src="img/roller/ig08.png" tag="08" /> <img src="img/roller/ig09.png" tag="09" /> <img src="img/roller/ig10.png" tag="10" /> </div> <div id="console1" class="console" ></div> </div> <div id="stat1" class="stat"></div>
.console{ position: absolute; background-color: rgba(0,0,0,0.8); color: #FFFFFF; width: 150px; height: 40px; padding: 12px 0 0 5px; left: 75px; top: 30px; box-shadow 0 0 1px 1px #BBBBBB; font-size: 20px; text-align: center; display: none; z-index: 5; -webkit-border-radius : 12px; -moz-border-radius : 12px; -o-border-radius : 12px; -ms-border-radius : 12px; border-radius : 12px; } .view{ float: left; width: 300px; height: 100px; margin: 10px 0 10px 0; border: solid 1px #000000; background-color: #FFFFFF; -webkit-border-radius : 6px; -moz-border-radius : 6px; -o-border-radius : 6px; -ms-border-radius : 6px; border-radius : 6px; } .stat{ float: left; width: 278px; margin: 10px 0 0 20px; } .container{ padding: 10px 0 10px 0; } .container img{ margin: 0 50px 0 50px; width: 80px; height: 80px; }
//以下をscriptのjqueryロード後の処理に記述します var samp1 = new Roller({ id: 'samp1v', cntid: 'samp1c', displacement: 60, autoadjustheight: false, autoadjustwidth: false, framerate: 60}); samp1.setWidth(true); samp1.setOnSkip(function(inertia, fchild, containerx){ $('#stat1').html(fchild.attr('tag')); }); samp1.setOnStop(function(disp, just){ $('#stat1').html(disp.attr('tag')+' stopped. just position is '+just); }); $('#samp1v .container').on('mousemove', function(evt){ //ドラッグ時の範囲選択を抑制 evt.preventDefault(); }); $('#samp1v .container > img').on('mousedown', function(evt){ //画像ドラッグ時で保存する機能を抑制 evt.preventDefault(); }); $('#samp1v .container > img').on('touchstart', function(evt){ //タッチデバイスのclick時に出るカーソルが出なくなるようにclickイベントを出させないため evt.preventDefault(); }); $('#samp1v .container > img').on('mouseup', function(evt){ //click動作をエミュレート(マウス) if(!samp1.moved)dispMessage($('#console1'), $(this).attr('tag'), 1000, 500); }); $('#samp1v .container > img').on('touchend', function(evt){ //click動作をエミュレート(タッチ) if(!samp1.moved)dispMessage($('#console1'), $(this).attr('tag'), 1000, 500); });
//以下の関数をscriptタグ内に記述します function dispMessage(tgt, msg, duration, spd){ tgt.html(msg); tgt.fadeIn(100, function(){ setTimeout(function(){ tgt.fadeOut(spd); }, duration); }); }
一つずつ見せるカルーセル










<--画像パスは書き換えてください--> <div id="samp2v" class="view"> <div id="samp2c" class="container"> <img src="img/roller/ig01.png" tag="01" /> <img src="img/roller/ig02.png" tag="02" /> <img src="img/roller/ig03.png" tag="03" /> <img src="img/roller/ig04.png" tag="04" /> <img src="img/roller/ig05.png" tag="05" /> <img src="img/roller/ig06.png" tag="06" /> <img src="img/roller/ig07.png" tag="07" /> <img src="img/roller/ig08.png" tag="08" /> <img src="img/roller/ig09.png" tag="09" /> <img src="img/roller/ig10.png" tag="10" /> </div> <div id="console2" class="console" ></div> <nav id="tol2" class="tol" ><img src="img/toleft.png"/></nav> <nav id="tor2" class="tor" ><img src="img/toright.png"/></nav> </div> <div id="stat2" class="stat"></div>
.console{ position: absolute; background-color: rgba(0,0,0,0.8); color: #FFFFFF; width: 150px; height: 40px; padding: 12px 0 0 5px; left: 75px; top: 30px; box-shadow 0 0 1px 1px #BBBBBB; font-size: 20px; text-align: center; display: none; z-index: 5; -webkit-border-radius : 12px; -moz-border-radius : 12px; -o-border-radius : 12px; -ms-border-radius : 12px; border-radius : 12px; } .view{ float: left; width: 300px; height: 100px; margin: 10px 0 10px 0; border: solid 1px #000000; background-color: #FFFFFF; -webkit-border-radius : 6px; -moz-border-radius : 6px; -o-border-radius : 6px; -ms-border-radius : 6px; border-radius : 6px; } .stat{ float: left; width: 278px; margin: 10px 0 0 20px; } .container{ padding: 10px 0 10px 0; } .container img{ margin: 0 50px 0 50px; width: 80px; height: 80px; } .tol{ position: absolute; bottom: 5px; left: 25px; } .tor{ position: absolute; bottom: 5px; right: 25px; }
//以下をscriptのjqueryロード後の処理に記述します var samp2 = new Roller({id: 'samp2v', cntid: 'samp2c', freetime: 0, displacement: 60, autoadjustheight: false, autoadjustwidth: false, framerate: 60}); samp2.setWidth(true); samp2.setOnSkip(function(inertia, fchild, containerx){ $('#stat2').html(fchild.attr('tag')); if(inertia){ samp2.stopAnimation(); } }); samp2.setOnStop(function(disp, just){ $('#samp2c').animate({left: just}, {duration: 200}); $('#stat2').html(disp.attr('tag')+' stopped. just position is '+just); }); $('#samp2v .container').on('mousemove', function(evt){ //ドラッグ時の範囲選択を抑制 evt.preventDefault(); }); $('#samp2v .container').on('mousedown', function(evt){ //画像ドラッグ時で保存する機能を抑制 evt.preventDefault(); }); $('#samp2v .container > img').on('mouseup', function(evt){ //click動作をエミュレート(マウス) if(!samp2.moved)dispMessage($('#console2'), $(this).attr('tag'), 1000, 500); }); $('#samp2v .container > img').on('touchstart', function(evt){ //タッチデバイスのclick時に出るカーソルが出なくなるようにclickイベントを出させないため evt.preventDefault(); }); $('#samp2v .container > img').on('touchend', function(evt){ //click動作をエミュレート(タッチ) if(!samp2.moved)dispMessage($('#console2'), $(this).attr('tag'), 1000, 500); }); $('#tol2').on('click', function(evt){ samp2.goLeft(1, 200); }); $('#tor2').on('click', function(evt){ samp2.goRight(1, 200); });
//以下の関数をscriptタグ内に記述します function dispMessage(tgt, msg, duration, spd){ tgt.html(msg); tgt.fadeIn(100, function(){ setTimeout(function(){ tgt.fadeOut(spd); }, duration); }); }
3個表示カルーセル










<--画像パスは書き換えてください--> <div id="samp3v" class="view" > <div id="samp3c" class="container3"> <img src="img/roller/ig01.png" tag="01" /> <img src="img/roller/ig02.png" tag="02" /> <img src="img/roller/ig03.png" tag="03" /> <img src="img/roller/ig04.png" tag="04" /> <img src="img/roller/ig05.png" tag="05" /> <img src="img/roller/ig06.png" tag="06" /> <img src="img/roller/ig07.png" tag="07" /> <img src="img/roller/ig08.png" tag="08" /> <img src="img/roller/ig09.png" tag="09" /> <img src="img/roller/ig10.png" tag="10" /> </div> <div id="console3" class="console" ></div> <nav id="tol3" class="tol" ><img src="img/toleft.png"/></nav> <nav id="tor3" class="tor" ><img src="img/toright.png"/></nav> </div> <div id="stat3" class="stat"></div>
.console{ position: absolute; background-color: rgba(0,0,0,0.8); color: #FFFFFF; width: 150px; height: 40px; padding: 12px 0 0 5px; left: 75px; top: 30px; box-shadow 0 0 1px 1px #BBBBBB; font-size: 20px; text-align: center; display: none; z-index: 5; -webkit-border-radius : 12px; -moz-border-radius : 12px; -o-border-radius : 12px; -ms-border-radius : 12px; border-radius : 12px; } .view{ float: left; width: 300px; height: 100px; margin: 10px 0 10px 0; border: solid 1px #000000; background-color: #FFFFFF; -webkit-border-radius : 6px; -moz-border-radius : 6px; -o-border-radius : 6px; -ms-border-radius : 6px; border-radius : 6px; } .stat{ float: left; width: 278px; margin: 10px 0 0 20px; } .container3{ padding: 10px 0 10px 0; } .container3 img{ margin: 0 10px 0 10px; width: 80px; height: 80px; } .tol{ position: absolute; bottom: 5px; left: 25px; } .tor{ position: absolute; bottom: 5px; right: 25px; }
//以下をscriptのjqueryロード後の処理に記述します var samp3 = new Roller({ id: 'samp3v', cntid: 'samp3c', freetime: 0, autoadjustheight: false, autoadjustwidth: false, framerate: 60}); samp3.setOnSkip(function(inertia, fchild, containerx){ var tg = fchild.attr('tag'); $('#stat3').html(tg); samp3cnt++; if(samp3cnt>=3){ if(inertia)samp3.stopAnimation(); samp3cnt = 0; } }); samp3.setOnStop(function(disp, just){ $('#samp3c').animate({left: just}, {duration: 200}); samp3cnt = 0; $('#stat3').html(disp.attr('tag')+' stopped. just position is '+just); }); $('#samp3v .container3').on('mousemove', function(evt){ //ドラッグ時の範囲選択を抑制 evt.preventDefault(); }); $('#samp3v .container3').on('mousedown', function(evt){ //画像ドラッグ時で保存する機能を抑制 evt.preventDefault(); }); $('#samp3v .container3 > img').on('mouseup', function(evt){ //click動作をエミュレート(マウス) if(!samp3.moved)dispMessage($('#console3'), $(this).attr('tag'), 1000, 500); }); $('#samp3v .container3 > img').on('touchstart', function(evt){ //タッチデバイスのclick時に出るカーソルが出なくなるようにclickイベントを出させないため evt.preventDefault(); }); $('#samp3v .container3 > img').on('touchend', function(evt){ //click動作をエミュレート(タッチ) if(!samp3.moved)dispMessage($('#console3'), $(this).attr('tag'), 1000, 500); }); $('#tol3').on('click', function(evt){ samp3.goLeft(3, 300); }); $('#tor3').on('click', function(evt){ samp3.goRight(3, 300); }); samp3.setWidth();
//以下の関数をscriptタグ内に記述します function dispMessage(tgt, msg, duration, spd){ tgt.html(msg); tgt.fadeIn(100, function(){ setTimeout(function(){ tgt.fadeOut(spd); }, duration); }); }
3連カルーセル










<--画像パスは書き換えてください--> <div id="samp4v" class="view" > <div id="samp4c" class="container4"> <div class="block no1" tag="block01"> <img src="img/roller/ig01.png" tag="01" /> <img src="img/roller/ig02.png" tag="02" /> <img src="img/roller/ig03.png" tag="03" /> </div> <div class="block no2" tag="block02"> <img src="img/roller/ig04.png" tag="04" /> <img src="img/roller/ig05.png" tag="05" /> <img src="img/roller/ig06.png" tag="06" /> </div> <div class="block no3" tag="block03"> <img src="img/roller/ig07.png" tag="07" /> <img src="img/roller/ig08.png" tag="08" /> <img src="img/roller/ig09.png" tag="09" /> </div> <div class="block no4" tag="block04"> <img src="img/roller/ig10.png" tag="10" /> </div> </div> <div id="console4" class="console" ></div> <nav id="tol4" class="tol" ><img src="img/toleft.png"/></nav> <nav id="tor4" class="tor" ><img src="img/toright.png"/></nav> <div class="viewpoints"> <div id="vp41"></div> <div id="vp42"></div> <div id="vp43"></div> <div id="vp44"></div> </div> </div> <div id="stat4" class="stat"></div>
.console{ position: absolute; background-color: rgba(0,0,0,0.8); color: #FFFFFF; width: 150px; height: 40px; padding: 12px 0 0 5px; left: 75px; top: 30px; box-shadow 0 0 1px 1px #BBBBBB; font-size: 20px; text-align: center; display: none; z-index: 5; -webkit-border-radius : 12px; -moz-border-radius : 12px; -o-border-radius : 12px; -ms-border-radius : 12px; border-radius : 12px; } .view{ float: left; width: 300px; height: 100px; margin: 10px 0 10px 0; border: solid 1px #000000; background-color: #FFFFFF; -webkit-border-radius : 6px; -moz-border-radius : 6px; -o-border-radius : 6px; -ms-border-radius : 6px; border-radius : 6px; } .stat{ float: left; width: 278px; margin: 10px 0 0 20px; } .container4 img{ margin: 0 10px 0 10px; display: block; float: left; } .view4{ float: left; width: 310px; margin: 10px 0 10px 0; border: solid 1px #000000; background-color: #FFFFFF; -webkit-border-radius : 6px; -moz-border-radius : 6px; -o-border-radius : 6px; -ms-border-radius : 6px; border-radius : 6px; } .block{ padding: 10px 0 10px 0; width: 300px; } .no1{ background-color: #FFBBBB; } .no2{ background-color: #BBFFBB; } .no3{ background-color: #BBBBFF; } .no4{ background-color: #FFFFAA; } .viewpoints{ position: absolute; bottom: 3px; left: 75px; } .viewpoints div{ float: left; width: 15px; height: 15px; margin: 0 10px 0 10px; -webkit-border-radius : 8px; -moz-border-radius : 8px; -o-border-radius : 8px; -ms-border-radius : 8px; border-radius : 8px; border: solid 1px #666666; background-color: #FFFFFF; } .tol{ position: absolute; bottom: 5px; left: 25px; } .tor{ position: absolute; bottom: 5px; right: 25px; }
//以下をscriptのjqueryロード後の処理に記述します var front4 = 1; $('#vp41').css({backgroundColor: 'rgba(231,129,95,1)'}); var samp4 = new Roller({ id: 'samp4v', cntid: 'samp4c', freetime: 0, autoadjustheight: false, autoadjustwidth: false, framerate: 60}); samp4.setOnSkip(function(inertia, fchild, containerx){ var tg = fchild.attr('tag'); $('#stat4').html(tg); if(inertia){ samp4.stopAnimation(); } }); samp4.setOnStop(function(disp, just){ $('#samp4c').animate({left: just}, {duration: 200}); front4 = parseInt(disp.attr('tag').replace('block0', '')); $('.viewpoints div').css({backgroundColor: 'rgba(255,255,255,1)'}); $('#vp4'+front4).css({backgroundColor: 'rgba(231,129,95,1)'}); $('#stat4').html(disp.attr('tag')+' stopped. just position is '+just); }); $('#samp4v .container4').on('mousemove', function(evt){ //ドラッグ時の範囲選択を抑制 evt.preventDefault(); }); $('#samp4v .container4').on('mousedown', function(evt){ //画像ドラッグ時で保存する機能を抑制 evt.preventDefault(); }); $('#samp4v .container4 img').on('mouseup', function(evt){ //click動作をエミュレート(マウス) if(!samp4.moved)dispMessage($('#console4'), $(this).attr('tag'), 1000, 500); }); $('#samp4v .container4 > img').on('touchstart', function(evt){ //タッチデバイスのclick時に出るカーソルが出なくなるようにclickイベントを出させないため evt.preventDefault(); }); $('#samp4v .container4 > img').on('touchend', function(evt){ //click動作をエミュレート(タッチ) if(!samp4.moved)dispMessage($('#console4'), $(this).attr('tag'), 1000, 500); }); $('#tol4').on('click', function(evt){ samp4.goLeft(1, 300); }); $('#tor4').on('click', function(evt){ samp4.goRight(1, 300); }); var movevp = function(toidx){ if(front4==4 && toidx==1){ samp4.goLeft(1, 300); } else if(front4 > toidx){ samp4.goRight(front4 - toidx, 300); } else if(front4 < toidx){ samp4.goLeft(toidx - front4, 300); } }; $('#vp41').on('touchstart', function(evt){ movevp(1); }); $('#vp41').on('mousedown', function(evt){ movevp(1); }); $('#vp42').on('touchstart', function(evt){ movevp(2); }); $('#vp42').on('mousedown', function(evt){ movevp(2); }); $('#vp43').on('touchstart', function(evt){ movevp(3); }); $('#vp43').on('mousedown', function(evt){ movevp(3); }); $('#vp44').on('touchstart', function(evt){ movevp(4); }); $('#vp44').on('mousedown', function(evt){ movevp(4); }); samp4.setWidth();
//以下の関数をscriptタグ内に記述します function dispMessage(tgt, msg, duration, spd){ tgt.html(msg); tgt.fadeIn(100, function(){ setTimeout(function(){ tgt.fadeOut(spd); }, duration); }); }
設定
- 未指定:必須条件:文字列id
- Rollerを構成する要素のうち、viewに設定する要素のid属性値を指定します。idのない要素をRollerのviewにすることはできません。
- 未指定:必須条件:文字列cntid
- Rollerを構成する要素のうち、containerに設定する要素のid属性値を指定します。idのない要素をRollerのcontainerにすることはできません。
- 未指定:0条件:0->top 1->translate3dusetranslate
- containerの位置指定に使用するスタイル要素を指定します。0はtopを使った絶対位置指定、1を指定するとtranslate3dを使った指定になります。translate3dを使うと一部の端末で動きが滑らかになりますが、Androidでフォーカスとのずれが生じてクリックやテキスト入力ができなくなる場合もありますので使用する際は注意してください。
- 未指定:40.0条件:px/秒^2単位の0以上の数値friction
- 慣性動作時に1秒間あたりに減少させるスクロールスピードを指定します。
- 未指定:200条件:ミリ秒単位の0以上の数値freetime
- 慣性動作時に指定したミリ秒間、減速されずにスクロールスピードが減速されません。
- 未指定:40条件:0より上の整数framerate
- 1秒間にスクロール移動するコマ数を指定します。この設定はスワイプ中ではなく慣性動作(スワイプで投げるような動作)時に適用されます。
- 未指定:15条件:px単位の数値rebounddistance
- ここで指定したピクセル以上スワイプ・ドラッグすると、stopコールバック関数に渡される引数の「一番近いピッタリな境界線」が動かした方向の境界線になります。
- 未指定:0条件:px単位の数値displacement
- 0を指定すると一番最初にコンテナ内に記述した要素の左端がビューの左端に合うように描画されます。ここにはそこからのずれを右を正として指定します。
- 未指定:2条件:0->全て 1->マウス 2->タッチ 9->なしhandlemode
- 回転させる方法を決定します。これが0の状態だとマウスとタッチ両方のイベントを拾って動作します。9に設定するとドラッグやスワイプで動かなくなります。
- 未指定:true条件:true|falseautotranslatemode
- Rollerではusetranslateを1にしてもそのままではブラウザが「Android 3.x以下」「iPhone OS 4」「Opera」「IE」であった場合自動的に0に設定しなおします。autotranslatemodeをfalseに指定しておくとこの自動置き換え機能を抑制し、どのブラウザであってもtranslate3dで位置指定するようになります。ただし問題のある端末を抑制していますので、falseに設定する場合は十分に注意してください。
- 未指定:false条件:true|falsenothidden
- この設定をtrueにすると、viewに自動的にoverflow: hidden設定をしなくなります。
- 未指定:true条件:true|falseautoadjustheight
- この設定がtrueの場合、setWidh()を呼び出したときにviewの内側の高さを自動的にcontainerの外側の高さに設定します。
- 未指定:true条件:true|falseautoadjustwidth
- この設定がtrueの場合、containerの子要素のloadイベントが発生するたびにsetWidth()を呼び出し、コンテナの幅とコンテナ位置の調整を行います。
- 未指定:true条件:true|falseautofloat
- Rollerではcontainerをabsolute指定するため、横幅を指定する必要があります。この設定がtrueだと自動的に「width: 100%」を指定します。
- 未指定:true条件:true|falserotation [v1.1.0 以上]
- この設定をfalseにするとコンテナの移動に伴う子要素の入れ替えを行わなくなります。この設定を切り替えるとアニメーションロジックが全く別のものに切り替わります。
- 未指定:-条件:-stopAnimation()
- 今動作しているアニメーションをキャンセルします。同時にstopイベントを発生します。
- 未指定:-条件:-setOnSkip(function(inertia, fchild, containerx){})
- 引数にコールバック関数を指定することで、正面にある要素が変わったときの処理を記述することができます。ロジック的には初期表示でcontainerの子要素の先頭を返し、以降は先頭の子要素が最初にあった位置に来た要素を返します。引数はそれぞれinertia: 慣性動作中かどうか、fchild: 正面に来た要素、containerx: containerの現在のleft値
- 未指定:-条件:-setOnStop(function(disp, just){})
- 引数にコールバック関数を指定することで、containerの移動が終わったときの処理を記述することができます。引数はそれぞれdisp: 正面に来た要素、just: dispが真正面に来るために移動すべき位置
- 未指定:-条件:-setWidth(adjustleft)
- containerの内部要素の幅を計算し、conntainerの幅を設定します。autoadjustheightがtrueなら同時にviewとcontainerの高さをcontainerに合わせ、adjustleftがtrueならcontainerの位置調整を行います。
- 未指定:-条件:-moveTo(to, duration)
- containerの位置を指定されたtoにdurationミリ秒で移動します。この関数は内部のロジックを考慮しているので、toに大きい値を指定しても問題ありません。
- 未指定:-条件:-getToLeft(times)
- 指定したtimes個の要素分、左に移動するために必要な移動量をピクセル単位で返します。
- 未指定:-条件:-getToRight(times)
- 指定したtimes個の要素分、右に移動するために必要な移動量をピクセル単位で返します。
- 未指定:-条件:-goLeft(times, duration)
- 指定したtimes個の要素分、durationミリ秒かけて左に移動します。
- 未指定:-条件:-goRight(times, duration)
- 指定したtimes個の要素分、durationミリ秒かけて右に移動します。
- 未指定:-条件:-purgeEvents()[v1.2.0 以上]
- 自動で登録したイベントハンドラをすべて解除します。