jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

jQueryでタップやスワイプなどのスマートフォン操作を取得する+イメージスライダーのサンプル

2014年9月15日
この記事は掲載から1131日経過しています。
情報が古い可能性が有りますのでご了承下さい

スマートフォンでも使えるスライダーを作りましたので宜しければどうぞー

 

タップ、スワイプ、指を離すという動作を取得する

jQueryにはスマートフォンのタップなどを取得するタッチイベントというものが有ります。ところでタップとタッチってどちらが正しいのでしょうか…よく迷います。

touchstart : タップしたときに発生
touchmove : スワイプしたときに発生
touchend : タップした指を離した時に発生



サンプルはiPhoneやAndroid等、タッチパネル搭載端末でご覧下さい。全ソース見たい方はこちらから

jQuery

それぞれのタッチイベントごとにイベントハンドラを用意し、どんな操作をしたか表示する単純なものです。スワイプは左右どちらにスワイプしたかを判断させています。処理としては、タップしたときの位置をメモリーしておき、スワイプした位置と比較して判断します。メモリーはjQuery.data()を使っています。

これを踏まえてイメージスライダーを作ってみる

左右にスワイプした事を取得出来るのですから、指でスライドさせるイメージスライダーがぱっと浮かぶかなぁと思いますので、これを作ってみます。



サンプルはiPhoneやAndroid等、タッチパネル搭載端末でご覧下さい。全ソース見たい方はこちらから

画像部分

画像をLIで並べ、それぞれIDを1~振ります。

CSS

画像は絶対位置を指定して横に並ぶようにし、一枚だけ表示するようにします。ですので、#swipeの左から(left:xxx)の距離を変更する事で、画像をスライドさせる事になります。

jQuery

ごちゃーっとしてますが、#swipeの位置を変更しているだけです。但し、これはタッチイベントを使って何が出来るかってサンプルです。スマフォ&PC対応の画像スライダープラグインが有りますので、実用的にはそちらを使う方が良いと思います。

左右どちらにスワイプしたかって事を判断出来るって事は、もちろん上下も判断出来ます。ということは、上下左右のコントローラーが作れるってことなので、簡単な迷路ゲームとか作れそうですね。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP