Blog

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

2012.10.03Cat:jQuery デザイナー

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

 

こちらが作ったもの

DEMO

 

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

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

 

手順

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

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

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

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

 

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

 

HTML

 

JavaScript

 

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

無難だと感じました。

 

Author Profile

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

越境ECの最新情報

人気の記事

越境EC関連の記事

月から探す

ページTOPへ