Blog

フリックでの操作をjQueryで組む

2012.10.03Cat:jQuery デザイナー

jQueryを使って、プラグインを使わずにフリックで操作する方法を、探ってみました。

 

こちらが作ったもの

DEMO

 

今回はPCでのマウス操作で、フリックのような動きをしたときに、

動くようにしてみました(横方向のみ)。

 

手順

1.フリックを始めたときのマウス座標(横方向)を調べる。

2.フリックが終わったときのマウス座標(横方向)を調べる。

3.フリックを始めたときのマウス座標からクリックが終わったときのマウス座標を引いて、

負の値なら左に、正の値なら右に動くようにアニメーションさせる。

 

HTMLとJavaScriptのコードは次のとおりです。

 

HTML

 

JavaScript

 

思った以上に大変でしたので、実際はやっぱりプラグインを使ったほうが、

無難だと感じました。

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ