ど素人から毛を生やす。<延>

jQueryでフリックイベントを作りたかった件

Web > javascript 2015年8月21日(最終更新:1年前)

このページは2015.8.21に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。

カルーセルやスライドショーを作るとき、僕は基本的には自作jsを使います。
既成品のプラグインは作成元が日本でなくて権利関係がよくわからなかったり、汎用的故に余分なプログラムが入っていたりするのであまり使用したくないんですよね。

当然、僕の技術の及ばない範囲ではお世話にならざるを得ないのですが、
その「及ばない範囲」は狭いに越したことはない。

ので、今回はカルーセルやスライドショーをフリック(スマホのドラッグ的な)対応させたいと思います。

これらの解決法を載せているサイトは様々あったのですが、どうにも上手く行かないケースが多かったので、jsの書き方によって相性があるのかもしれません。

$('フリックする要素').bind('touchstart', function() {
	startX = event.changedTouches[0].pageX;//フリック開始時のX軸の座標
});
$('フリックする要素').bind('touchmove', function(e) {
	endX = event.changedTouches[0].pageX;//フリック終了時のX軸の座標
	diffX = Math.round(startX - endX);//フリック開始時の座標-終了時の座標=フリックの移動距離
});
$('フリックする要素').bind('touchend', function(e) {
if (diffX > 100) {
	//右から左へフリックしたときの挙動
} else if (diffX < -100) {
	//左から右へフリックしたときの挙動
};
});

大抵の場合は、右から左へフリックした場合は中身の要素は右向きにスクロールします。

参考サイトは以下です。
Web Design Note

この記事は役に立ちましたか?
  • (`・ω・´) 役に立った (0)
  • (・∀・) 参考になった (1)
  • _(:3」∠)_ 面白かった  (1)