
JavaScriptだけでスワイプ処理追加
JavaScriptだけでスワイプ処理を実装は以下のようなコードになる。
関数を作成しておけば要素を指定するだけで良い。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | function setSwipe(elem) { var t = document.querySelector(elem); var r = document.getElementById( 'result' ); var startX; var startY; var moveX; var moveY; var dist = 30; t.addEventListener( 'touchstart' , function (e) { e.preventDefault(); startX = e.touches[0].pageX; startY = e.touches[0].pageY; }); t.addEventListener( 'touchmove' , function (e) { e.preventDefault(); moveX = e.changedTouches[0].pageX; moveY = e.changedTouches[0].pageY; }); t.addEventListener( 'touchend' , function (e) { if (startX > moveX && startX > moveX + dist) { r.textContent = '右から左にスワイプ' ; } else if (startX < moveX && startX + dist < moveX) { r.textContent = '左から右にスワイプ' ; } }); } setSwipe( '#t' ); setSwipe( '.foo .bar' ); |
touchmoveイベントなどはパソコンではChromeのエミュレータなどを使用しないと発生しないので注意。
カルーセル(スライダー)にスワイプを実装
カルーセル(スライダー)にスワイプを実装するとこのようなコードになる。現在地を示すnav(小さい丸)も下に入れておくと良いだろう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | function setSwipe(elem) { var t = document.querySelector(elem); var tc = document.querySelector(elem + '> ul' ); var len = document.querySelectorAll(elem + '> ul > li' ).length; var startX; var startY; var moveX; var moveY; var dist = 30; var pos = 1; var nav = document.createElement( 'ul' ); nav.className = 'nav' ; for ( var i = 0; i < len; i++) { var li = document.createElement( 'li' ); if (i === 0) { li.className = 'active' ; } nav.appendChild(li); } t.parentNode.insertBefore(nav, t.nextElementSibling); var navLi = document.querySelectorAll( '.nav > li' ); t.addEventListener( 'touchstart' , function (e) { e.preventDefault(); startX = e.touches[0].pageX; startY = e.touches[0].pageY; }); t.addEventListener( 'touchmove' , function (e) { e.preventDefault(); moveX = e.changedTouches[0].pageX; moveY = e.changedTouches[0].pageY; }); t.addEventListener( 'touchend' , function (e) { navLi[pos - 1].classList.remove( 'active' ); if (startX > moveX && startX > moveX + dist && pos < len) { pos++; } else if (startX < moveX && startX + dist < moveX && pos > 1) { pos--; } tc.className = 'pos' + pos; navLi[pos - 1].classList.add( 'active' ); }); } setSwipe( '.carousel' ); |