teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問JavaScriptを使用して、クリックした時に画像が出てくるようにしたいです。

編集履歴

質問編集履歴

2

画像の拡大までは行けました。ズームアップと同時に各画像の説明文の展開がうまくできませんでした。

2021/02/16 17:27

投稿

falilv
falilv

スコア14

test CHANGED
File without changes
test CHANGED
@@ -1,14 +1,12 @@
1
- 表題の通りなのですが、画像を "クリック" したときに
1
+ 表題の通りなのですが、画像を "クリック" したときに,
2
-
3
- １.対象の画像をズームアップ
2
+
4
-
5
- ２.ズームアップと同時に対象画像の説明文も同時に表示
3
+ 「ズームアップと同時に対象画像の説明文も同時に表示」をしたいです。
6
-
7
-
8
-
9
- 以上をできるようにしたいです。
4
+
10
-
5
+
6
+
11
- スクロールしたときに画像が表示される所までしたので、その後に上記のムーブメントを組めるようにしたいを考えています。
7
+ 画像のクリックしたときに対象が拡大される所まではできました。
8
+
9
+ HTMLかCSSの　data-description　の位置がおかしいのでしょうか。
12
10
 
13
11
 
14
12
 
@@ -30,15 +28,15 @@
30
28
 
31
29
  <link rel="stylesheet" href="style.css">
32
30
 
33
- <script src="f.js" defer></script>>
34
-
35
31
  </head>
36
32
 
33
+
34
+
37
35
  <body>
38
36
 
39
37
  <header>
40
38
 
41
- <h1>画像紹介</h1>
39
+ <h1>表題</h1>
42
40
 
43
41
  </header>
44
42
 
@@ -48,15 +46,15 @@
48
46
 
49
47
  <ul class="contents">
50
48
 
49
+
50
+
51
- <li class="animationTarget">
51
+ <li class="animationTarget" data-description="説明1">
52
-
52
+
53
- <img src="photo/img1.JPG" alt="">
53
+ <img id="img1.JPG" src="img1.JPG" alt="">
54
54
 
55
55
  <div class="contentsText">
56
56
 
57
- <h2>-画像１-</h2>
57
+ <h2>-画像名１-</h2>
58
-
59
- <p>画像１ </p>
60
58
 
61
59
  </div>
62
60
 
@@ -64,15 +62,13 @@
64
62
 
65
63
 
66
64
 
67
- <li class="animationTarget">
65
+ <li class="animationTarget" data-description="説明2">
68
-
66
+
69
- <img src="photo/img2.JPG" alt="">
67
+ <img id = "img2.JPG" src="img2.JPG" alt="">
70
68
 
71
69
  <div class="contentsText">
72
70
 
73
- <h2画像２-</h2>
71
+ <h2>-画像名２-</h2>
74
-
75
- <p>画像２</p>
76
72
 
77
73
  </div>
78
74
 
@@ -80,15 +76,13 @@
80
76
 
81
77
 
82
78
 
83
- <li class="animationTarget">
79
+ <li class="animationTarget" data-description="説明3">
84
-
80
+
85
- <img src="photo/img3.JPG" alt="">
81
+ <img id="img3.JPG" src="img3.JPG" alt="">
86
82
 
87
83
  <div class="contentsText">
88
84
 
89
- <h2>画像３</h2>
85
+ <h2>-画像名３-</h2>
90
-
91
- <p>画像３</p>
92
86
 
93
87
  </div>
94
88
 
@@ -96,15 +90,13 @@
96
90
 
97
91
 
98
92
 
99
- <li class="animationTarget">
93
+ <li class="animationTarget" data-description="説明4">
100
-
94
+
101
- <img src="photo/img4.JPG" alt="">
95
+ <img id="img4.JPG" src="img4.JPG" alt="">
102
96
 
103
97
  <div class="contentsText">
104
98
 
105
- <h2>画像４</h2>
99
+ <h2>-画像名４-</h2>
106
-
107
- <p>画像４</p>
108
100
 
109
101
  </div>
110
102
 
@@ -114,12 +106,22 @@
114
106
 
115
107
  </ul>
116
108
 
109
+ <script src="first.js" defer></script>>
110
+
117
111
  </main>
118
112
 
119
113
  </body>
120
114
 
121
115
  </html>
122
116
 
117
+
118
+
119
+
120
+
121
+
122
+
123
+
124
+
123
125
  ```
124
126
 
125
127
 
@@ -206,12 +208,12 @@
206
208
 
207
209
  position: relative;
208
210
 
211
+ }
212
+
209
213
 
210
214
 
211
215
  .contents li.show h2,
212
216
 
213
- .contents li.show p,
214
-
215
217
  .contents li.show img {
216
218
 
217
219
  transform: none;
@@ -222,6 +224,20 @@
222
224
 
223
225
 
224
226
 
227
+ .contents li.active img{
228
+
229
+ width: 130%;
230
+
231
+ }
232
+
233
+
234
+
235
+ .contents li.active::before {
236
+
237
+ content: attr(data-description);
238
+
239
+ }
240
+
225
241
 
226
242
 
227
243
  .contents li:not(:first-of-type) {
@@ -310,64 +326,88 @@
310
326
 
311
327
 
312
328
 
313
- .contents p {
329
+ .contents img{
314
-
315
- line-height: 1.6;
330
+
316
-
317
- background-color: #555555;
318
-
319
- font-size: 13px;
320
-
321
- max-width: 340px;
331
+ width: 80%;
322
-
332
+
323
- padding: 15px;
333
+ display: block;
324
-
325
- margin-top: 30px;
326
334
 
327
335
  border-radius: 5px;
328
336
 
337
+
338
+
329
339
  opacity: 0;
330
340
 
331
- transform: translateX(20px);
332
-
333
- transition: 2s;
334
-
335
- }
336
-
337
-
338
-
339
- .contents img{
340
-
341
- width: 80%;
342
-
343
- display: block;
344
-
345
- border-radius: 5px;
346
-
347
- opacity: 0;
348
-
349
341
  transition: 1s .5s;
350
342
 
351
343
  }
352
344
 
353
345
 
354
346
 
347
+
348
+
355
349
  ```
356
350
 
357
351
 
358
352
 
359
353
  ```JS　
360
354
 
355
+ const targetElement = document.querySelectorAll(".animationTarget");
356
+
357
+
358
+
359
+ document.addEventListener("scroll", function(){
360
+
361
+ for(let i = 0 ; i < targetElement.length; i++) {
362
+
363
+ const getElementDistance = targetElement[i].
364
+
365
+ getBoundingClientRect().top + targetElement[i].clientHeight * .6
366
+
367
+ if(window.innerHeight > getElementDistance) {
368
+
369
+ targetElement[i].classList.add("show");
370
+
371
+ }
372
+
373
+ }
374
+
375
+ })
376
+
377
+
378
+
361
- document.getElementById("画像") .addEventListener("click", function(){
379
+ document.getElementById("img1.JPG").addEventListener("click",function(e){
362
-
380
+
363
- 〜〜〜〜
381
+ e.target.parentElement.classList.add("active")
364
382
 
365
383
  });
366
384
 
385
+
386
+
387
+ document.getElementById("img2.JPG").addEventListener("click",function(e){
388
+
389
+ e.target.parentElement.classList.add("active")
390
+
391
+ });
392
+
393
+
394
+
395
+ document.getElementById("img3.JPG").addEventListener("click",function(e){
396
+
397
+ e.target.parentElement.classList.add("active")
398
+
399
+ });
400
+
401
+
402
+
403
+ document.getElementById("img4.JPG").addEventListener("click",function(e){
404
+
405
+ e.target.parentElement.classList.add("active")
406
+
407
+ });
408
+
367
409
  ```
368
410
 
369
411
 
370
412
 
371
413
  クリックしたときの処理内容はJSで、実際の出力アニメーションはCSSを使うのかなと思ったのですが、詰まりました。
372
-
373
- 知恵を貸してください。宜しくお願いいたします。

1

HTML,CSSのできている所まで記載。JSはさっぱりです。

2021/02/16 17:27

投稿

falilv
falilv

スコア14

test CHANGED
File without changes
test CHANGED
@@ -1,12 +1,258 @@
1
- 表題の通り、画像をクリックしたときに画像がズームアップされるような出力をしたいです。
1
+ 表題の通りなのですが、画像を "クリック" したときに
2
-
3
- 画面が切り替わって大きく表示、ではなく、対象の画像を「ズーム表示」＋「その画像についてのコメントも表示」　のようなイメージです。
2
+
4
-
5
-
6
-
7
-
8
-
9
- ```cssでの画像出力のイメージ
3
+ １.対象の画像をズームアップ
4
+
5
+ ２.ズームアップと同時に対象画像の説明文も同時に表示
6
+
7
+
8
+
9
+ 以上をできるようにしたいです。
10
+
11
+ スクロールしたときに画像が表示される所までしたので、その後に上記のムーブメントを組めるようにしたいを考えています。
12
+
13
+
14
+
15
+ ```HTML
16
+
17
+ <!DOCTYPE html>
18
+
19
+ <html lang = 'ja'>
20
+
21
+ <head>
22
+
23
+ <meta charset="UTF-8">
24
+
25
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
26
+
27
+ <title>Document</title>
28
+
29
+ <link rel="stylesheet" href="https://github.com/filipelinhares/ress/blob/master/ress.css">
30
+
31
+ <link rel="stylesheet" href="style.css">
32
+
33
+ <script src="f.js" defer></script>>
34
+
35
+ </head>
36
+
37
+ <body>
38
+
39
+ <header>
40
+
41
+ <h1>画像紹介</h1>
42
+
43
+ </header>
44
+
45
+
46
+
47
+ <main>
48
+
49
+ <ul class="contents">
50
+
51
+ <li class="animationTarget">
52
+
53
+ <img src="photo/img1.JPG" alt="">
54
+
55
+ <div class="contentsText">
56
+
57
+ <h2>-画像１-</h2>
58
+
59
+ <p>画像１ </p>
60
+
61
+ </div>
62
+
63
+ </li>
64
+
65
+
66
+
67
+ <li class="animationTarget">
68
+
69
+ <img src="photo/img2.JPG" alt="">
70
+
71
+ <div class="contentsText">
72
+
73
+ <h2画像２-</h2>
74
+
75
+ <p>画像２</p>
76
+
77
+ </div>
78
+
79
+ </li>
80
+
81
+
82
+
83
+ <li class="animationTarget">
84
+
85
+ <img src="photo/img3.JPG" alt="">
86
+
87
+ <div class="contentsText">
88
+
89
+ <h2>画像３</h2>
90
+
91
+ <p>画像３</p>
92
+
93
+ </div>
94
+
95
+ </li>
96
+
97
+
98
+
99
+ <li class="animationTarget">
100
+
101
+ <img src="photo/img4.JPG" alt="">
102
+
103
+ <div class="contentsText">
104
+
105
+ <h2>画像４</h2>
106
+
107
+ <p>画像４</p>
108
+
109
+ </div>
110
+
111
+ </li>
112
+
113
+
114
+
115
+ </ul>
116
+
117
+ </main>
118
+
119
+ </body>
120
+
121
+ </html>
122
+
123
+ ```
124
+
125
+
126
+
127
+ ```【CSS】
128
+
129
+ @charset "utf-8";
130
+
131
+
132
+
133
+ body {
134
+
135
+ font-family: serif;
136
+
137
+ background-color: #333333;
138
+
139
+ color: bisque;
140
+
141
+ }
142
+
143
+
144
+
145
+ *, *::before, *::after{
146
+
147
+ box-sizing: border-box;
148
+
149
+ }
150
+
151
+
152
+
153
+ header{
154
+
155
+ padding: 50px;
156
+
157
+ }
158
+
159
+
160
+
161
+ @keyframes titleAnimation{
162
+
163
+ 0% {
164
+
165
+ letter-spacing: .3em;
166
+
167
+ opacity: 0;
168
+
169
+ }
170
+
171
+ }
172
+
173
+
174
+
175
+
176
+
177
+ header h1{
178
+
179
+ font-size: 80px;
180
+
181
+ font-weight: bold;
182
+
183
+ margin-bottom: 50px;
184
+
185
+ white-space: nowrap;
186
+
187
+ animation: titleAnimation 1.5s;
188
+
189
+ }
190
+
191
+
192
+
193
+ main{
194
+
195
+ max-width: 1000px;
196
+
197
+ width: 100%;
198
+
199
+ margin: 50px auto;
200
+
201
+ }
202
+
203
+
204
+
205
+ .contents li{
206
+
207
+ position: relative;
208
+
209
+
210
+
211
+ .contents li.show h2,
212
+
213
+ .contents li.show p,
214
+
215
+ .contents li.show img {
216
+
217
+ transform: none;
218
+
219
+ opacity: 1;
220
+
221
+ }
222
+
223
+
224
+
225
+
226
+
227
+ .contents li:not(:first-of-type) {
228
+
229
+ margin-top: 200px;
230
+
231
+ }
232
+
233
+
234
+
235
+ .contents li:nth-of-type(odd) .contentsText{
236
+
237
+ right: 0;
238
+
239
+ }
240
+
241
+
242
+
243
+ .contents li:nth-of-type(even) .contentsText{
244
+
245
+ align-items: flex-start;
246
+
247
+ }
248
+
249
+
250
+
251
+ .contents li:nth-of-type(odd) img{
252
+
253
+ transform:translate(-20px, 20px);
254
+
255
+ }
10
256
 
11
257
  .contents li:nth-of-type(even) img{
12
258
 
@@ -16,6 +262,80 @@
16
262
 
17
263
  }
18
264
 
265
+
266
+
267
+
268
+
269
+ .contentsText {
270
+
271
+ display: flex;
272
+
273
+ flex-direction: column;
274
+
275
+ align-items: flex-end;
276
+
277
+ position:absolute;
278
+
279
+ top: 40px;
280
+
281
+ }
282
+
283
+
284
+
285
+ .contents h2{
286
+
287
+ font-size: 30px;
288
+
289
+ font-weight: bold;
290
+
291
+ white-space: nowrap;
292
+
293
+ background-color:rgba(19, 4, 4, 0.8);
294
+
295
+ padding: 20px 10px;
296
+
297
+ line-height: 1.5;
298
+
299
+ letter-spacing: 0.5em;
300
+
301
+ border-radius: 5px;
302
+
303
+ opacity: 0;
304
+
305
+ transform: translateY(20px);
306
+
307
+ transition: 2s;
308
+
309
+ }
310
+
311
+
312
+
313
+ .contents p {
314
+
315
+ line-height: 1.6;
316
+
317
+ background-color: #555555;
318
+
319
+ font-size: 13px;
320
+
321
+ max-width: 340px;
322
+
323
+ padding: 15px;
324
+
325
+ margin-top: 30px;
326
+
327
+ border-radius: 5px;
328
+
329
+ opacity: 0;
330
+
331
+ transform: translateX(20px);
332
+
333
+ transition: 2s;
334
+
335
+ }
336
+
337
+
338
+
19
339
  .contents img{
20
340
 
21
341
  width: 80%;
@@ -24,8 +344,6 @@
24
344
 
25
345
  border-radius: 5px;
26
346
 
27
-
28
-
29
347
  opacity: 0;
30
348
 
31
349
  transition: 1s .5s;
@@ -38,11 +356,13 @@
38
356
 
39
357
 
40
358
 
41
- クリックする時のJSのコードは、{}の中に画像出力の処理コードを記入する感じですか？
42
-
43
- ```JavaScript
359
+ ```JS　
44
-
360
+
45
- document.getElementById("画像") .addEventListener("click", function(){}
361
+ document.getElementById("画像") .addEventListener("click", function(){
362
+
363
+ 〜〜〜〜
364
+
365
+ });
46
366
 
47
367
  ```
48
368