jQueryを使って、プラグインを使わずにフリックで操作する方法を、探ってみました。
こちらが作ったもの
今回はPCでのマウス操作で、フリックのような動きをしたときに、
動くようにしてみました(横方向のみ)。
手順
１．フリックを始めたときのマウス座標(横方向)を調べる。
2.フリックが終わったときのマウス座標(横方向)を調べる。
3.フリックを始めたときのマウス座標からクリックが終わったときのマウス座標を引いて、
負の値なら左に、正の値なら右に動くようにアニメーションさせる。
HTMLとJavaScriptのコードは次のとおりです。
HTML
|
1 2 3 4 5 6 7 | <div id="gallery"> <ul class="moveBox"> <li class="box"><img src="images/img1.jpg" width="640" height="480" alt="img1"></li> <li class="box"><img src="images/img2.jpg" width="640" height="480" alt="img2"></li> <li class="box"><img src="images/img3.jpg" width="640" height="480" alt="img3"></li> </ul> </div> |
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | $(function(){ //初期設定 $(".moveBox").css("margin-left", "0px"); var xs = 0;//タッチを始めたときのX座標 var ys = 0;//タッチを始めたときのY座標 var xe = 0;//タッチが終わったときのX座標 var ye = 0;//タッチが終わったときのY座標 $(".moveBox").bind("mousedown touchstart", function(e){ e.preventDefault(); var eo = e.originalEvent; if(e.type == "mousedown"){//PCのとき xs = eo.pageX; ys = eo.pageY; } }); $(".moveBox").bind("mouseup touchend", function(e){ e.preventDefault(); var eo = e.originalEvent; if(e.type == "mouseup"){//PCのとき xe = eo.pageX; ye = eo.pageY; } if(xs - xe < 0 && $(this).css("margin-left") != "0px"){ var str = $(this).css("margin-left"); stri = str.indexOf("p"); var ml = str.substr(0, stri); ml = Number(ml) + 640; ml = ml + "px"; $(this).animate({ marginLeft: ml },"fast"); } if(xs - xe > 0 && $(this).css("margin-left") != "-1280px"){ var str = $(this).css("margin-left"); stri = str.indexOf("p"); var ml = str.substr(0, stri); ml = Number(ml) - 640; ml = ml + "px"; $(this).animate({ marginLeft: ml },"fast"); } }); }); |
思った以上に大変でしたので、実際はやっぱりプラグインを使ったほうが、
無難だと感じました。
