質問編集履歴
4
タイトル変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
【jQuery】
|
|
1
|
+
【jQuery】変数の意味を知りたいです。
|
body
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
スワイプ
|
|
1
|
+
スワイプ実装で変数d={x:undefined,thisX:undefined,startX:undefined,moveX:undefined};と書く意図が分からなかったので教えていただきたいです。
|
|
2
|
-
動作
|
|
2
|
+
動作はできています。
|
|
3
3
|
|
|
4
4
|
```html
|
|
5
5
|
<!doctype html>
|
3
質問内容を変更しました
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
【jQuery】
|
|
1
|
+
【jQuery】スワイプで定義した変数の意味を知りたいです。
|
body
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
jQueryのフリックを実装しているのですが、ドラッグしたときの処理が私の書いたコードを仕様書のコードと同じ挙動にしたいです。
|
|
2
|
-
|
|
1
|
+
スワイプの変数を宣言しているd={x:undefined,thisX:undefined,startX:undefined,moveX:undefined};と書いた理由が分からなかったので教えていただきたいです。
|
|
3
|
-
|
|
2
|
+
動作確認はできています。
|
|
4
3
|
|
|
5
|
-
### 私が書いたコード
|
|
6
4
|
```html
|
|
7
5
|
<!doctype html>
|
|
8
6
|
<html>
|
|
@@ -28,96 +26,13 @@
|
|
|
28
26
|
</div>
|
|
29
27
|
<script type="text/javascript" src="js/jquery.js"></script>
|
|
30
28
|
<script type="text/javascript">
|
|
31
|
-
/**
|
|
32
|
-
* （説明）
|
|
33
|
-
* @type {number} slideWidth ← .swipe-photo-itemの幅を取得して代入
|
|
34
|
-
* @type {string} slideNum ← .swipe-photo-itemの数を取得して代入
|
|
35
|
-
* @type {number} slideSetWidth ← .swipe-photo-itemの幅×数で求めた値を代入
|
|
36
|
-
* @type {number} slideCurrent ← 現在地を示す変数
|
|
37
|
-
* @type {string} deirection ← スワイプしたときの方向
|
|
38
|
-
* @type {string} position ← 横方向の座標の変数
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
**/
|
|
43
|
-
|
|
44
|
-
$(function(){
|
|
45
|
-
var flickStart, flickMove, flickEnd;
|
|
46
|
-
|
|
47
|
-
$(".swipe-photo-item").on({
|
|
48
|
-
"touchstart": function(event){
|
|
49
|
-
flickStart(event);
|
|
50
|
-
},
|
|
51
|
-
"touchmove": function(event){
|
|
52
|
-
flickMove(event);
|
|
53
|
-
},
|
|
54
|
-
"touchend": function(event){
|
|
55
|
-
flickEnd(event);
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
|
|
59
|
-
(function(){
|
|
60
|
-
var slideWidth = $('.swipe-photo-item').outerWidth();
|
|
61
|
-
var slideNum = $('.swipe-photo-item').length;
|
|
62
|
-
var slideSetWidth = slideWidth * slideNum;
|
|
63
|
-
var slideCurrent = 0;
|
|
64
|
-
var direction, position;
|
|
65
|
-
|
|
66
|
-
// .swipe-photo-containerのスタイルシートにwidth: 上の変数を指定
|
|
67
|
-
$('.swipe-photo-container').css('width', slideSetWidth);
|
|
68
|
-
|
|
69
|
-
// アニメーションを実行する即時変数
|
|
70
|
-
var sliding = function sliding(){
|
|
71
|
-
// slideCurrentが0以下の場合
|
|
72
|
-
if(slideCurrent<0){
|
|
73
|
-
slideCurrent = 0;
|
|
74
|
-
|
|
75
|
-
// slideCurrentがslideNumを超えたら
|
|
76
|
-
}else if(slideCurrent > slideNum - 1){
|
|
77
|
-
slideCurrent = 5;
|
|
78
|
-
}
|
|
79
|
-
$('.swipe-photo-container').animate({
|
|
80
|
-
left: slideCurrent * -slideWidth
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// タッチイベントの処理内容
|
|
85
|
-
flickStart = function flickStart(event){
|
|
86
|
-
position = getPosition(event);
|
|
87
|
-
direction = ''; // 一度リセットする
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
flickMove = function flickMove(event){
|
|
91
|
-
if(position - getPosition(event) > 1){
|
|
92
|
-
direction = 'left';
|
|
93
|
-
}else if(position - getPosition(event) < 1){
|
|
94
|
-
direction = 'right';
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
flickEnd = function flickEnd(event){
|
|
99
|
-
if(direction=='right'){
|
|
100
|
-
slideCurrent--;
|
|
101
|
-
sliding();
|
|
102
|
-
}else if(direction=='left'){
|
|
103
|
-
slideCurrent++;
|
|
104
|
-
sliding();
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
// 横方向の座標を取得
|
|
109
|
-
getPosition = function getPosition(event){
|
|
110
|
-
return event.originalEvent.changedTouches[0].pageX;
|
|
111
|
-
}
|
|
112
|
-
})();
|
|
113
|
-
});
|
|
114
29
|
</script>
|
|
115
30
|
</body>
|
|
116
31
|
</html>
|
|
117
32
|
|
|
118
33
|
```
|
|
119
34
|
|
|
120
|
-
###
|
|
35
|
+
### 該当のコード
|
|
121
36
|
```script
|
|
122
37
|
$(function(){
|
|
123
38
|
var b=$(".swipe-photo"),
|
2
タイトル変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
【jQuery】
|
|
1
|
+
【jQuery】ドラッグしたときに画像が動くようにしたいです。
|
body
CHANGED
|
File without changes
|
1
内容修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
jQueryのフリックを実装しているのですが、ドラッグしたときの処理が私の書いたコードを仕様書のコードと同じ挙動にしたい
|
|
1
|
+
jQueryのフリックを実装しているのですが、ドラッグしたときの処理が私の書いたコードを仕様書のコードと同じ挙動にしたいです。
|
|
2
|
+
画像をフリックと同時に画像が左右に動く挙動にしないといけないのですが、私が書いたコードですとフリックしたらスライドショーのような挙動になってしまいます。
|
|
2
|
-
|
|
3
|
+
どうすれば画像をタッチしたのと同時に画像が左右に動く挙動になるのかを教えていただきたいです。
|
|
3
4
|
|
|
4
5
|
### 私が書いたコード
|
|
5
6
|
```html
|