ネイティブJsでも使える
スマホでスワイプ操作が出来る便利で簡単なjQueryプラグイン「flipsnap」だけど
flipsnap.jsというのを書いた - Webtech Walker
jQuery必須ではなく、ソースはネイティブjsで書かれてたので普通のjavascriptで動いた(@version 0.6.2で動作確認)
そこから、ランダムに無限表示できるような実装を考えてた
DOM読み込み寺にflipnap適応
window.onloadではなくDOMContentLoadedを使ってます
window.addEventListener("DOMContentLoaded", function(){ $flipsnap = Flipsnap("#demo"); }, false);
fstouchendイベントから現在地を取得
$flipsnap.element.addEventListener('fstouchend', function(ev) { $newPT =ev.newPoint; }, false);
- ボタン移動をする場合は、newPointの取得が出来ないので直接$newPTの値を加算・減算する
一番端に来た時に新しい写真を追加
- 最大ブロック数の記録用変数($maxPT)を用意しておく
- 現実的には通信ラグがあるので端から2〜3番目に来た時に追加読み込みするのが良いと思う
if($newPT >= $maxPT){ $maxPT ++ ; pushhtml(); } //写真追加 function pushhtml(){ //データ(配列)の数を計算 $dataleng = $photodata.length-1; //配列の中からランダムなidを取得 $photoid = Math.round( Math.random()*$dataleng); //追加するPタグノードを作成 var pNode = document.createElement('p'); //imageオブジェクトを作成 var image = new Image(); //画像URLを指定 image.src = $photodata[$photoid]; //ノードに画像を追加 pNode.appendChild(image); //親タグにノードを追加 document.getElementById('demo').appendChild(pNode); //リフレッシュで全体の幅を再取得 $flipsnap.refresh(); }
- image.onloadで画像を読み込んでから配置する事も可能だけど、その場合はrefreshのタイミングも読み込み後に指定しないと、端まで移動ができなくなる
まあこんなもんかな