質問編集履歴
3
補足
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -130,4 +130,10 @@
|
|
|
130
130
|
これと同時に(時計回りの順番で)移動させるにはどうしたら良いでしょうか？
|
|
131
131
|
例えば、一回目のクリック時（二枚目の写真）には赤を緑の位置へ、緑を黄色の位置へ、黄色を赤の位置へ移動させる感じです。
|
|
132
132
|
|
|
133
|
-
何卒、ご回答の程よろしくお願いいたします。
|
|
133
|
+
何卒、ご回答の程よろしくお願いいたします。
|
|
134
|
+
|
|
135
|
+
###ログ画面
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
リストの中に値は格納されているのですが、サイズだけが変更されて、移動部分が動作しません。
|
|
139
|
+
そもそも、距離の計算方法が間違っているのでしょうか...？
|
2
補足
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -50,4 +50,84 @@
|
|
|
50
50
|
このような説明で大丈夫でしょうか...？
|
|
51
51
|
分かりにくくて申し訳ございません。
|
|
52
52
|
|
|
53
|
+
何卒、ご回答の程よろしくお願いいたします。
|
|
54
|
+
|
|
55
|
+
###試したこと
|
|
56
|
+
プログラミングを始めてまだ1週間ちょっとなので、本当に無駄が多いコードだと思います...。
|
|
57
|
+
見にくくて申し訳ございません。
|
|
58
|
+
|
|
59
|
+
一応、それぞれのオブジェクトの座標を取得し、サイズ変更することはできました。
|
|
60
|
+
しかし、オブジェクト間の距離を測ってから移動させることができません。
|
|
61
|
+
|
|
62
|
+
```JavaScript
|
|
63
|
+
function Test(){
|
|
64
|
+
var btn = document.getElementById("next-btn");
|
|
65
|
+
btn.onclick = function(){
|
|
66
|
+
//3つの円を取得
|
|
67
|
+
var photos = document.getElementsByClassName("photos")
|
|
68
|
+
//サイズ変更と移動のための変数を初期化
|
|
69
|
+
var now_width = []; //幅
|
|
70
|
+
var next_width = [];
|
|
71
|
+
var now_height = []; //高さ
|
|
72
|
+
var next_height = [];
|
|
73
|
+
var now_pos_obj = []; //座標オブジェクト
|
|
74
|
+
var next_pos_obj = [];
|
|
75
|
+
var now_left = []; //画面左からの距離
|
|
76
|
+
var next_left = [];
|
|
77
|
+
var now_top = []; //画面上からの距離
|
|
78
|
+
var next_top = [];
|
|
79
|
+
var distance_x = []; //自分自身と次に移動すべきオブジェクト間の距離
|
|
80
|
+
var distance_y = [];
|
|
81
|
+
|
|
82
|
+
//クリック時の座標を取得
|
|
83
|
+
//自分自身の座標と次に移動すべきオブジェクトの座標を取得
|
|
84
|
+
for (var i = 0; i < photos.length; i++) {
|
|
85
|
+
var next_num = i + 1;
|
|
86
|
+
if(next_num == 3){
|
|
87
|
+
next_num = 0;
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
now_pos_obj.push(photos[i].getBoundingClientRect());
|
|
91
|
+
next_pos_obj.push(photos[next_num].getBoundingClientRect());
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
//移動に必要な情報を取得
|
|
95
|
+
for(var j = 0; j < 3; j++){
|
|
96
|
+
//次のサイズを取得
|
|
97
|
+
next_width.push(next_pos_obj[j].width.toString());
|
|
98
|
+
next_height.push(next_pos_obj[j].height.toString());
|
|
99
|
+
|
|
100
|
+
//距離を求めるための値を取得
|
|
101
|
+
now_left.push(now_pos_obj[j].left);
|
|
102
|
+
next_left.push(next_pos_obj[j].left);
|
|
103
|
+
now_top.push(now_pos_obj[j].top);
|
|
104
|
+
next_top.push(next_pos_obj[j].top);
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
//現在地から次の目的地までの距離を算出
|
|
108
|
+
for(var k = 0; k < 3; k++){
|
|
109
|
+
//横方向
|
|
110
|
+
distance_x.push((next_left[k] - now_left[k]).toString());
|
|
111
|
+
//縦方向
|
|
112
|
+
distance_y.push((next_top[k] - now_top[k]).toString());
|
|
113
|
+
|
|
114
|
+
//それぞれのオブジェクトをサイズ変更&移動させる
|
|
115
|
+
//******************************移動部分が上手くいかない******************************
|
|
116
|
+
for(var l = 0; l < 3; l++){
|
|
117
|
+
$(photos[l]).animate({"top":distance_y[l]+"px", "left":distance_x[l]+"px",
|
|
118
|
+
"width":next_width[l]+"px", "height":next_height[l]+"px"});
|
|
119
|
+
};
|
|
120
|
+
};
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
###テスト画面
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
現在はその場でそれぞれのオブジェクトのサイズが変わっているだけなのですが、
|
|
130
|
+
これと同時に(時計回りの順番で)移動させるにはどうしたら良いでしょうか？
|
|
131
|
+
例えば、一回目のクリック時（二枚目の写真）には赤を緑の位置へ、緑を黄色の位置へ、黄色を赤の位置へ移動させる感じです。
|
|
132
|
+
|
|
53
133
|
何卒、ご回答の程よろしくお願いいたします。
|
1
補足
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -11,4 +11,43 @@
|
|
|
11
11
|
|
|
12
12
|
おそらく、指定場所の座標を取得して、サイズを変更しつつ移動させるのだと思いますが、どう手を付けて良いか全く分からない状態です。
|
|
13
13
|
|
|
14
|
+
何卒、ご回答の程よろしくお願いいたします。
|
|
15
|
+
|
|
16
|
+
```javascript
|
|
17
|
+
window.onload = function(){
|
|
18
|
+
photo_change();
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
function photo_change(){
|
|
22
|
+
var btn = document.getElementById("next-btn");
|
|
23
|
+
btn.onclick = function(){
|
|
24
|
+
var photos = document.getElementsByClassName("photos")
|
|
25
|
+
for (var i = 0; i < photos.length; i++) {
|
|
26
|
+
var next_num = photos[i].src[59] - 1;
|
|
27
|
+
next_num = parseInt(next_num)
|
|
28
|
+
if(next_num == 0){
|
|
29
|
+
next_num = 3;
|
|
30
|
+
};
|
|
31
|
+
photos[i].src = "images/photo"+next_num+".jpg";
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
###補足
|
|
38
|
+
皆様、ご回答ありがとうございます。
|
|
39
|
+
|
|
40
|
+
説明不足で申し訳ありません。
|
|
41
|
+
見にくく、無駄のあるコードかと思いますが、記載しました。
|
|
42
|
+
流れとしては、黒いボタンを押す→photo_changeが起動する→それぞれの画像のパスの番号(59番目)を取得する→次の表示領域に画像を移動させる
|
|
43
|
+
となっています。
|
|
44
|
+
座標の取得と移動、サイズの変更等はまだ試しておりません。
|
|
45
|
+
そもそもタイトルに示したことが実現できるのかどうかも分かりませんでしたので、質問させていただきました。
|
|
46
|
+
|
|
47
|
+
何をどうしたいのかというと、指定した場所へのスムーズな移動とそれに伴うサイズ変更です。
|
|
48
|
+
具体的には、赤の丸を緑の丸がある場所へサイズを変更しながら移動（緑の丸を黄色の丸がある場所へサイズを変更しながら移動、黄色の丸をサイズを変更しながら赤い丸がある場所へ移動）といった感じのサイクルを、黒ボタンを押すごとに実現させたいです。
|
|
49
|
+
|
|
50
|
+
このような説明で大丈夫でしょうか...？
|
|
51
|
+
分かりにくくて申し訳ございません。
|
|
52
|
+
|
|
14
53
|
何卒、ご回答の程よろしくお願いいたします。
|