質問編集履歴
1
javascript 追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -165,3 +165,77 @@
|
|
|
165
165
|
}
|
|
166
166
|
|
|
167
167
|
```
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
```ここに言語を入力
|
|
172
|
+
|
|
173
|
+
// 素材のランダム配置
|
|
174
|
+
|
|
175
|
+
function randomImages(id) {
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
// 関数の引数に設定したid要素を変数に代入
|
|
180
|
+
|
|
181
|
+
var box = $(id);
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
// 画像配列
|
|
186
|
+
|
|
187
|
+
var imageList = [
|
|
188
|
+
|
|
189
|
+
's01',
|
|
190
|
+
|
|
191
|
+
's02',
|
|
192
|
+
|
|
193
|
+
's03',
|
|
194
|
+
|
|
195
|
+
];
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
var width = window.innerWidth;
|
|
200
|
+
|
|
201
|
+
var height = window.innerHeight;
|
|
202
|
+
|
|
203
|
+
// 配列の数だけ繰り返し処理
|
|
204
|
+
|
|
205
|
+
for ( var i=0; i<imageList.length; i++) {
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
// 縦横軸用の乱数生成
|
|
210
|
+
|
|
211
|
+
var x = width * (Math.floor(Math.random() * 100) / 100); // 画像位置 top:x
|
|
212
|
+
|
|
213
|
+
var y = height * (Math.floor(Math.random() * 100) / 100); // 画像位置 left:y
|
|
214
|
+
|
|
215
|
+
var w = Math.floor(Math.random() * 100) + 90; // 画像サイズwidth ランダム値に100px加算
|
|
216
|
+
|
|
217
|
+
var f = Math.floor(Math.random() * 3) + 1; // fuwafuwa randomu
|
|
218
|
+
|
|
219
|
+
|
|
220
|
+
|
|
221
|
+
// sp
|
|
222
|
+
|
|
223
|
+
if (matchMedia('(max-width: 960px) and (orientation: portrait)').matches) {
|
|
224
|
+
|
|
225
|
+
// ウィンドウサイズが960px以下かつ縦向きのとき
|
|
226
|
+
|
|
227
|
+
w = w * 0.7;
|
|
228
|
+
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
// box要素にimgタグを追加（乱数を代入した変数をポジションに設定）
|
|
234
|
+
|
|
235
|
+
box.append('<div class="logo" style="top:'+y+'px; left:'+x+'px;"><img src="/img/sdgs/'+imageList[i]+'.svg" class="pc-home-img fuwafuwa'+f+'" alt="" style="width:'+w+'px;"></div>');
|
|
236
|
+
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
```
|