編集履歴

質問編集履歴

タイトル変更

2019/12/13 04:14

投稿

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- 【jQuery】~~スワイプで定義した~~変数の意味を知りたいです。
1	+ 【jQuery】変数の意味を知りたいです。

test CHANGED Viewed

@@ -1,6 +1,6 @@
-スワイプの変数を宣言しているd={x:undefined,thisX:undefined,startX:undefined,moveX:undefined};と書いた理由が分からなかったので教えていただきたいです。
+スワイプ実装で変数d={x:undefined,thisX:undefined,startX:undefined,moveX:undefined};と書く意図が分からなかったので教えていただきたいです。
-動作確認はできています。
+動作はできています。

質問内容を変更しました

2019/12/13 04:14

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- 【jQuery】~~ドラッグ~~した~~ときに画像が動くようにし~~たいです。
1	+ 【jQuery】スワイプで定義した変数の意味を知りたいです。

test CHANGED Viewed

@@ -1,12 +1,8 @@
-jQueryのフリックを実装しているのですが、ドラッグしたときの処理が私の書いたコードを仕様書のコードと同じ挙動にしたいです。
-画像をフリックと同時に画像が左右に動く挙動にしないといけないのですが、私が書いたコードですとフリックしたらスライドショーのような挙動になってしまいます。
+スワイプの変数を宣言しているd={x:undefined,thisX:undefined,startX:undefined,moveX:undefined};と書いた理由が分からなかったので教えていただきたいです。
-どうすれば画像をタッチしたのと同時に画像が左右に動く挙動になるのかを教えていただきたいです。
-### 私が書いたコード
+動作確認はできています。
 ```html
@@ -58,330 +54,164 @@
 <script type="text/javascript">
+</script>
-/**
+</body>
-  * （説明）
-  * @type {number} slideWidth ← .swipe-photo-itemの幅を取得して代入
-  * @type {string} slideNum ← .swipe-photo-itemの数を取得して代入
-  * @type {number} slideSetWidth ← .swipe-photo-itemの幅×数で求めた値を代入
-  * @type {number} slideCurrent ← 現在地を示す変数
-  * @type {string} deirection ← スワイプしたときの方向
-  * @type {string} position ← 横方向の座標の変数
-  *
-  *
-  *
-**/
+</html>
+```
+### 該当のコード
+```script
 $(function(){
-  var flickStart, flickMove, flickEnd;
-  $(".swipe-photo-item").on({
-    "touchstart": function(event){
-      flickStart(event);
-    },
-    "touchmove": function(event){
-      flickMove(event);
-    },
-    "touchend": function(event){
-      flickEnd(event);
-    }
-  });
-  (function(){
-    var slideWidth = $('.swipe-photo-item').outerWidth();
-    var slideNum = $('.swipe-photo-item').length;
-    var slideSetWidth = slideWidth * slideNum;
-    var slideCurrent = 0;
-    var direction, position;
-    // .swipe-photo-containerのスタイルシートにwidth: 上の変数を指定
-    $('.swipe-photo-container').css('width', slideSetWidth);
-    // アニメーションを実行する即時変数
-    var sliding = function sliding(){
-      // slideCurrentが0以下の場合
-      if(slideCurrent<0){
-        slideCurrent = 0;
-      // slideCurrentがslideNumを超えたら
-      }else if(slideCurrent > slideNum - 1){
-        slideCurrent = 5;
-      }
-      $('.swipe-photo-container').animate({
-        left: slideCurrent * -slideWidth
-      });
-    }
-    // タッチイベントの処理内容
-    flickStart = function flickStart(event){
-      position = getPosition(event);
-      direction = ''; //  一度リセットする
-    }
-    flickMove = function flickMove(event){
-      if(position - getPosition(event) > 1){
-        direction = 'left';
-      }else if(position - getPosition(event) < 1){
-        direction = 'right';
-      }
-    }
-    flickEnd = function flickEnd(event){
-      if(direction=='right'){
-        slideCurrent--;
-        sliding();
-      }else if(direction=='left'){
-        slideCurrent++;
-        sliding();
-      }
-    }
-    // 横方向の座標を取得
-    getPosition = function getPosition(event){
-      return event.originalEvent.changedTouches[0].pageX;
-    }
-  })();
-});
-</script>
-</body>
-</html>
+	  var b=$(".swipe-photo"),
+	  f=b.find(".swipe-photo-container"),
+	  j=b.find(".swipe-photo-item"),
+	  e=j.find(".swipe-photo-thumbnail"),
+	  h=e.width(),
+	  a=j.length,
+	  k=[],
+	  d={x:undefined,thisX:undefined,startX:undefined,moveX:undefined};
+	  for(var c=0;c<=a;c++){
+	    k[c]=-c*h
+	  }
+	  $(".swipe-photo-container").width(h*a);
+	  j.on({touchstart:function(i){
+	    d.thisX=parseInt($(".swipe-photo-container").css("left"));
+	    d.startX=i.originalEvent.changedTouches[0].pageX-d.thisX
+	  },
+	  touchmove:function(i){
+	    i.preventDefault();
+	    d.x=i.originalEvent.changedTouches[0].pageX;
+	    if(d.x-d.startX>=0){
+	            d.moveX=0
+	    }else{
+	      if(d.x-d.startX<=k[a-1]){
+	        d.moveX=k[a-1]
+	      }else{
+	        d.moveX=d.x-d.startX
+	      }
+	    }
+	    $(".swipe-photo-container").css({left:d.moveX})
+	  },
+	  touchend:function(n){
+	    var m="";
+	    for(var l=0;l<a;l++){
+	      if(k[l]+(h/2)>d.moveX&&d.moveX>=k[l+1]+(h/2))
+	        {m=l}}
+	        $(".swipe-photo-container").animate({
+	        left:k[m]
+	        },400)}
+	    })
+    });
 ```
-### 仕様書のコード
-```script
-$(function(){
-	  var b=$(".swipe-photo"),
-	  f=b.find(".swipe-photo-container"),
-	  j=b.find(".swipe-photo-item"),
-	  e=j.find(".swipe-photo-thumbnail"),
-	  h=e.width(),
-	  a=j.length,
-	  k=[],
-	  d={x:undefined,thisX:undefined,startX:undefined,moveX:undefined};
-	  for(var c=0;c<=a;c++){
-	    k[c]=-c*h
-	  }
-	  $(".swipe-photo-container").width(h*a);
-	  j.on({touchstart:function(i){
-	    d.thisX=parseInt($(".swipe-photo-container").css("left"));
-	    d.startX=i.originalEvent.changedTouches[0].pageX-d.thisX
-	  },
-	  touchmove:function(i){
-	    i.preventDefault();
-	    d.x=i.originalEvent.changedTouches[0].pageX;
-	    if(d.x-d.startX>=0){
-	            d.moveX=0
-	    }else{
-	      if(d.x-d.startX<=k[a-1]){
-	        d.moveX=k[a-1]
-	      }else{
-	        d.moveX=d.x-d.startX
-	      }
-	    }
-	    $(".swipe-photo-container").css({left:d.moveX})
-	  },
-	  touchend:function(n){
-	    var m="";
-	    for(var l=0;l<a;l++){
-	      if(k[l]+(h/2)>d.moveX&&d.moveX>=k[l+1]+(h/2))
-	        {m=l}}
-	        $(".swipe-photo-container").animate({
-	        left:k[m]
-	        },400)}
-	    })
-    });
+### 共通CSS
+```css
+.swipe-photo {
+    position: relative;
+    width: 320px;
+    height: 240px;
+    margin: 0 auto;
+    overflow: hidden;
+}
+.swipe-photo-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.swipe-photo-item {
+    float: left;
+}
+.swipe-photo-thumbnail {
+    width: 320px;
+    height: 240px;
+}
 ```
-### 共通CSS
-```css
-.swipe-photo {
-    position: relative;
-    width: 320px;
-    height: 240px;
-    margin: 0 auto;
-    overflow: hidden;
-}
-.swipe-photo-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-.swipe-photo-item {
-    float: left;
-}
-.swipe-photo-thumbnail {
-    width: 320px;
-    height: 240px;
-}
-```

タイトル変更

2019/12/13 03:24

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- 【jQuery】~~フリックの実装で~~ドラッグしたとき~~の処理~~に~~ついて教えてい~~た~~だきた~~いです。
1	+ 【jQuery】ドラッグしたときに画像が動くようにしたいです。

test CHANGED Viewed

File without changes

内容修正

2019/12/12 09:31

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,6 +1,8 @@
-jQueryのフリックを実装しているのですが、ドラッグしたときの処理が私の書いたコードを仕様書のコードと同じ挙動にしたいのです。
+jQueryのフリックを実装しているのですが、ドラッグしたときの処理が私の書いたコードを仕様書のコードと同じ挙動にしたいです。
+画像をフリックと同時に画像が左右に動く挙動にしないといけないのですが、私が書いたコードですとフリックしたらスライドショーのような挙動になってしまいます。
-私の書いたコードに何を追加すれば良いか教えていただきたいです。
+どうすれば画像をタッチしたのと同時に画像が左右に動く挙動になるのかを教えていただきたいです。