teratail
回答率
85.47%
質問するログイン新規登録
トップHTML5に関する質問３つの画像をスライドインするトップページを作りたい

編集履歴

回答編集履歴

13

メニューを指定幅以下にする、初期のみ背景画像を表示する

2017/02/19 06:32

投稿

naomi3
naomi3

スコア1105

test CHANGED
File without changes

12

メニューを指定幅以下にする、初期のみ背景画像を表示

2017/02/19 06:18

投稿

naomi3
naomi3

スコア1105

test CHANGED
File without changes

11

メニューを指定幅以下にする、初期のみ背景画像を表示

2017/02/19 06:16

投稿

naomi3
naomi3

スコア1105

test CHANGED
File without changes

10

2017/02/19 06:10

投稿

naomi3
naomi3

スコア1105

test CHANGED
File without changes

9

メニューが表示されるようにコード修正

2017/02/16 06:20

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -68,6 +68,16 @@
68
68
 
69
69
  文字を上下左右中央に来るようにしました。
70
70
 
71
+
72
+
73
+ 修正
74
+
75
+
76
+
77
+ すみません。z-indexではなかったですね。
78
+
79
+ メニューがちゃんと出るようにしました。
80
+
71
81
  ```HTML
72
82
 
73
83
  <!DOCTYPE html>
@@ -154,8 +164,46 @@
154
164
 
155
165
  text-align : center;
156
166
 
167
+ vertical-align : middle;
168
+
157
169
  }
158
170
 
171
+
172
+
173
+ #menu {
174
+
175
+ position : relative;
176
+
177
+ overflow : hidden;
178
+
179
+ margin-left : -4px;
180
+
181
+ margin-right : -4px;
182
+
183
+ }
184
+
185
+
186
+
187
+ .menuItem {
188
+
189
+ position : relative;
190
+
191
+ float : left;
192
+
193
+ text-align : center;
194
+
195
+ }
196
+
197
+
198
+
199
+ #menuItem1, #menuItem3 {
200
+
201
+ border-left : solid 1px;
202
+
203
+ border-right : solid 1px;
204
+
205
+ }
206
+
159
207
  </style>
160
208
 
161
209
  <script src="jquery-2.1.4.js"></script>
@@ -198,7 +246,7 @@
198
246
 
199
247
  // ブラウザの画面幅がこの値より狭くなると2段モード
200
248
 
201
- var discontinuousWidth = 1000;
249
+ var discontinuousWidth = 1000; // px
202
250
 
203
251
  // 2段にするか否か
204
252
 
@@ -220,6 +268,18 @@
220
268
 
221
269
  var startedAnimation = false;
222
270
 
271
+ // 画像とメニューの隙間
272
+
273
+ var gapBetweenImgAndMenu = 10; // px
274
+
275
+ // 1メニュー項目の幅
276
+
277
+ var widthOfMenuItem;
278
+
279
+ // メニューのボーダー
280
+
281
+ var borderOfMenu = 1; // px
282
+
223
283
 
224
284
 
225
285
 
@@ -244,6 +304,106 @@
244
304
 
245
305
 
246
306
 
307
+ function placeObjects(posX, posXOfLargerImg, withCurtains) {
308
+
309
+ var maxHeightOfImg = 0;
310
+
311
+
312
+
313
+ for (var index = 0; index < allImgs.length; index++) {
314
+
315
+ if (! modeIn2Rows || index !== 0) {
316
+
317
+ // 1段モード または 2段モード2番目以降の画像(下段)
318
+
319
+ // 1段モードのとき、縦位置は 0 に戻す
320
+
321
+ var posY = (modeIn2Rows ? heightOfLargerImg : 0);
322
+
323
+ var heightOfImg = allImgSizes[index].ratio * widthOfImg;
324
+
325
+
326
+
327
+ maxHeightOfImg = Math.max(maxHeightOfImg, heightOfImg);
328
+
329
+
330
+
331
+ moveTo(allImgs[index].parent(), posX, posY);
332
+
333
+
334
+
335
+ resizeTo(allImgs[index], widthOfImg, heightOfImg);
336
+
337
+
338
+
339
+ // コンテナからの相対座標
340
+
341
+ moveTo(allTexts[index],
342
+
343
+ (widthOfImg - allTextSizes[index].width) / 2,
344
+
345
+ (heightOfImg - allTextSizes[index].height) / 2);
346
+
347
+
348
+
349
+ posX += widthOfImg;
350
+
351
+
352
+
353
+ if (withCurtains) {
354
+
355
+ moveTo(allCurtains[index], posX, posY);
356
+
357
+ resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg);
358
+
359
+ }
360
+
361
+ }
362
+
363
+ else {
364
+
365
+ // 2段モード かつ 最初の画像(上段)
366
+
367
+ moveTo(allImgs[index].parent(), posXOfLargerImg);
368
+
369
+
370
+
371
+ // 幅を画面いっぱいにする(縦横比はそのまま)
372
+
373
+ resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
374
+
375
+
376
+
377
+ // コンテナからの相対座標
378
+
379
+ moveTo(allTexts[index],
380
+
381
+ (widthOfLargerImg - allTextSizes[index].width) / 2,
382
+
383
+ (heightOfLargerImg - allTextSizes[index].height) / 2);
384
+
385
+ // posX += 0;
386
+
387
+ // カーテンなし
388
+
389
+ }
390
+
391
+ }
392
+
393
+
394
+
395
+ moveTo($('#menu'), undefined,
396
+
397
+ (modeIn2Rows ? heightOfLargerImg : 0) + maxHeightOfImg + gapBetweenImgAndMenu);
398
+
399
+ resizeTo($('.menuItem'), widthOfMenuItem)
400
+
401
+ }
402
+
403
+
404
+
405
+
406
+
247
407
  function initializeAndStartAnimation() {
248
408
 
249
409
  if (startedAnimation || ! calculateSizes()) {
@@ -258,37 +418,25 @@
258
418
 
259
419
  // ブラウザの画面幅があらかじめわからないので、CSSではなく、
260
420
 
261
- // JavaScriptで、画像およびカーテンの初期位置・サイズを設定する。
421
+ // JavaScriptで、画像、カーテン、テキスト、メニューの初期位置・サイズを設定する。
422
+
423
+ // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
424
+
425
+ placeObjects(0 - widthOfImg, 0 - widthOfLargerImg, true);
426
+
427
+
428
+
429
+ // 画像およびカーテンのアニメーション設定
262
430
 
263
431
  (function(posX) {
264
432
 
265
433
  for (var index = 0; index < allImgs.length; index++) {
266
434
 
267
- if (! modeIn2Rows || index !== 0) {
435
+ if (! modeIn2Rows) {
268
-
436
+
269
- // 1段モード または 2段モード2番目以降の画像(下段)
437
+ // 1段モード
270
-
271
- var posY = (modeIn2Rows ? heightOfLargerImg : undefined);
438
+
272
-
273
- var heightOfImg = allImgSizes[index].ratio * widthOfImg;
274
-
275
-
276
-
277
- moveTo(allImgs[index].parent(), posX, posY);
439
+ slideImgIn(allImgs[index].parent(), posX);
278
-
279
-
280
-
281
- resizeTo(allImgs[index], widthOfImg, heightOfImg);
282
-
283
-
284
-
285
- // コンテナからの相対座標
286
-
287
- moveTo(allTexts[index],
288
-
289
- (widthOfImg - allTextSizes[index].width) / 2,
290
-
291
- (heightOfImg - allTextSizes[index].height) / 2);
292
440
 
293
441
 
294
442
 
@@ -296,137 +444,181 @@
296
444
 
297
445
 
298
446
 
299
- moveTo(allCurtains[index], posX, posY);
447
+ openCurtain(allCurtains[index], posX);
300
-
301
- resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg);
302
448
 
303
449
  }
304
450
 
305
451
  else {
306
452
 
307
- // 2段モード かつ 最初の画像(上段)
453
+ // 2段モード
308
-
309
- moveTo(allImgs[index].parent(), 0 - widthOfLargerImg);
454
+
310
-
311
-
312
-
313
- // 幅を画面いっぱいにする(縦横比はそのまま)
455
+ if (index === 0) {
314
-
315
- resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
456
+
316
-
317
-
318
-
319
- // コンテナからの相対座標
457
+ // 最初の画像
320
-
458
+
321
- moveTo(allTexts[index],
459
+ // 上段
322
-
460
+
323
- (widthOfLargerImg - allTextSizes[index].width) / 2,
461
+ slideImgIn(allImgs[index].parent(), posX);
324
-
325
- (heightOfLargerImg - allTextSizes[index].height) / 2);
462
+
326
-
327
- // posX += 0;
463
+ // posX += 0;
328
-
464
+
329
- // カーテンなし
465
+ // カーテンなし
466
+
467
+ }
468
+
469
+ else {
470
+
471
+ // 2番目以降の画像
472
+
473
+ // 下段
474
+
475
+ // setTimeoutのコールバック関数に変化する値を
476
+
477
+ // 正しくわたすため、forループの実行毎に異なるスコープを作る
478
+
479
+ (function(thisImg, thisCurtain, thisPosX) {
480
+
481
+ setTimeout(function() {
482
+
483
+ // 指定ミリ秒遅れて動作
484
+
485
+ slideImgIn(thisImg.parent(), thisPosX);
486
+
487
+
488
+
489
+ thisPosX += widthOfImg;
490
+
491
+
492
+
493
+ openCurtain(thisCurtain, thisPosX);
494
+
495
+ },
496
+
497
+ delayBetweenSlideIn);
498
+
499
+ })
500
+
501
+ (allImgs[index], allCurtains[index], posX);
502
+
503
+
504
+
505
+ posX += widthOfImg;
506
+
507
+ }
330
508
 
331
509
  }
332
510
 
333
511
  }
334
512
 
335
- })(0 - widthOfImg); // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
513
+ })(0); // 最左の画像の位置は、ブラウザの画面と同じ
514
+
515
+
516
+
336
-
517
+ startedAnimation = true;
518
+
337
-
519
+ }
338
-
339
-
340
-
520
+
521
+
522
+
523
+
524
+
341
- // 画像およびカーテンのアニメーション設定
525
+ /** ブラウザの画面幅に応じてサイズを(再)計算する
526
+
342
-
527
+ * @return true:正しく計算できた／false:正しく計算できなかった
528
+
529
+ */
530
+
343
- (function(posX) {
531
+ function calculateSizes() {
344
-
345
- for (var index = 0; index < allImgs.length; index++) {
532
+
346
-
347
- if (! modeIn2Rows) {
533
+ var calculated = true;
348
-
534
+
535
+
536
+
349
- // 1段モード
537
+ // 画像のもとのサイズを取得
538
+
350
-
539
+ if (allImgSizes.length < allImgs.length) {
540
+
541
+ // まだ取得できていないときのみ、取得する
542
+
351
- slideImgIn(allImgs[index].parent(), posX);
543
+ $.each(allImgs, function(index, currentImg) {
544
+
352
-
545
+ var width = currentImg.width();
546
+
353
-
547
+ var height = currentImg.height();
548
+
549
+
550
+
354
-
551
+ if (width == 0 || height == 0) {
552
+
553
+ // Safariで画像がまだロードされていない場合
554
+
355
- posX += widthOfImg;
555
+ calculated = false;
356
-
357
-
358
-
556
+
359
- openCurtain(allCurtains[index], posX);
557
+ return;
360
558
 
361
559
  }
362
560
 
363
- else {
561
+
364
-
365
- // 2段モード
562
+
366
-
367
- if (index === 0) {
368
-
369
- // 最初の画像
370
-
371
- // 上段
372
-
373
- slideImgIn(allImgs[index].parent(), posX);
374
-
375
- // posX += 0;
376
-
377
- // カーテンなし
378
-
379
- }
380
-
381
- else {
382
-
383
- // 2番目以降の画像
384
-
385
- // 下段
386
-
387
- // setTimeoutのコールバック関数に変化する値を
388
-
389
- // 正しくわたすため、forループの実行毎に異なるスコープを作る
390
-
391
- (function(thisImg, thisCurtain, thisPosX) {
563
+ var ratio = height / width; // 画像の縦横比
392
-
393
- setTimeout(function() {
564
+
394
-
395
- // 指定ミリ秒遅れて動作
396
-
397
- slideImgIn(thisImg.parent(), thisPosX);
565
+ allImgSizes[index] = { 'width' : width, 'height' : height, 'ratio' : ratio };
398
-
399
-
400
-
401
- thisPosX += widthOfImg;
566
+
402
-
403
-
404
-
405
- openCurtain(thisCurtain, thisPosX);
406
-
407
- },
408
-
409
- delayBetweenSlideIn);
410
-
411
- })
567
+ });
412
-
413
- (allImgs[index], allCurtains[index], posX);
568
+
414
-
415
-
416
-
569
+
570
+
417
- posX += widthOfImg;
571
+ if (! calculated) {
418
-
572
+
419
- }
573
+ return false;
420
-
421
- }
422
574
 
423
575
  }
424
576
 
577
+ }
578
+
579
+
580
+
581
+ // テキストのサイズを取得
582
+
583
+ if (allTextSizes.length < allTexts.length) {
584
+
425
- })(0); // 最左の画像の位置は、ブラウザの画面と同じ
585
+ // まだ取得できていないときのみ、取得する
586
+
426
-
587
+ $.each(allTexts, function(index, currentText) {
588
+
427
-
589
+ var width = currentText.width();
590
+
428
-
591
+ var height = currentText.height();
592
+
593
+ allTextSizes[index] = { 'width' : width, 'height' : height };
594
+
595
+ });
596
+
597
+ }
598
+
599
+
600
+
601
+ var widthOfWindow = $(window).width();
602
+
603
+ modeIn2Rows = (widthOfWindow < discontinuousWidth);
604
+
605
+ widthOfImg = widthOfWindow / (modeIn2Rows ? allImgs.length - 1 : allImgs.length);
606
+
607
+ widthOfLargerImg = widthOfWindow;
608
+
609
+ heightOfLargerImg = allImgSizes[0].ratio * widthOfLargerImg;
610
+
611
+ var marginOfMenu = ($('#menu').css('margin-left').replace(/px$/, '') - 0) +
612
+
613
+ ($('#menu').css('margin-right').replace(/px$/, '') - 0);
614
+
615
+ widthOfMenuItem = - 4 +
616
+
617
+ (widthOfWindow - borderOfMenu * (allImgs.length + 1) + marginOfMenu) / allImgs.length;
618
+
619
+
620
+
429
- startedAnimation = true;
621
+ return true;
430
622
 
431
623
  }
432
624
 
@@ -434,147 +626,85 @@
434
626
 
435
627
 
436
628
 
437
- /** ブラウザの画面幅に応じてサイズを(再)計算する
629
+ // 画像、カーテン、テキスト、メニューの位置を変更する
438
-
439
- * @return true:正しく計算できた／false:正しく計算できなかった
630
+
440
-
441
- */
442
-
443
- function calculateSizes() {
444
-
445
- var calculated = true;
446
-
447
-
448
-
449
- // 画像のもとのサイズ、高さの最大値を取得
631
+ // 画像の場合はそのコンテナ
632
+
450
-
633
+ function moveTo(obj, targetPosX, targetPosY) {
634
+
451
- if (allImgSizes.length < allImgs.length || maxHeightOfImg == 0) {
635
+ if (typeof targetPosX !== 'undefined') {
452
-
636
+
453
- // まだ取得できていないときのみ、取得する
637
+ // targetPosX が指定されているときのみ変更する
454
-
638
+
455
- $.each(allImgs, function(index, currentImg) {
639
+ obj.css('left', targetPosX);
456
-
457
- var width = currentImg.width();
458
-
459
- var height = currentImg.height();
460
-
461
-
462
-
463
- if (width == 0 || height == 0) {
464
-
465
- // Safariで画像がまだロードされていない場合
466
-
467
- calculated = false;
468
-
469
- return;
470
-
471
- }
472
-
473
-
474
-
475
- var ratio = height / width; // 画像の縦横比
476
-
477
- allImgSizes[index] = { 'width' : width, 'height' : height, 'ratio' : ratio };
478
-
479
-
480
-
481
- maxHeightOfImg = Math.max(maxHeightOfImg, height);
482
-
483
- });
484
-
485
-
486
-
487
- if (! calculated) {
488
-
489
- return false;
490
-
491
- }
492
640
 
493
641
  }
494
642
 
495
643
 
496
644
 
497
- // テキストのサイズを取得
498
-
499
- if (allTextSizes.length < allTexts.length) {
645
+ if (typeof targetPosY !== 'undefined') {
500
-
646
+
501
- // まだ取得できていないときのみ、取得する
647
+ // targetPosY が指定されているときのみ変更する
502
-
648
+
503
- $.each(allTexts, function(index, currentText) {
649
+ obj.css('top', targetPosY);
504
-
505
- var width = currentText.width();
506
-
507
- var height = currentText.height();
508
-
509
- allTextSizes[index] = { 'width' : width, 'height' : height };
510
-
511
- });
512
650
 
513
651
  }
514
652
 
515
-
516
-
517
- var widthOfWindow = $(window).width();
518
-
519
- modeIn2Rows = (widthOfWindow < discontinuousWidth);
520
-
521
- widthOfImg = widthOfWindow / (modeIn2Rows ? allImgs.length - 1 : allImgs.length);
522
-
523
- widthOfLargerImg = widthOfWindow;
524
-
525
- heightOfLargerImg = allImgSizes[0].ratio * widthOfLargerImg;
526
-
527
-
528
-
529
- return true;
530
-
531
653
  }
532
654
 
533
655
 
534
656
 
535
-
536
-
537
- // 画像、カーテンの位置を変更する
657
+ // 画像、カーテン、メニュー項目のサイズを変更する
538
-
539
- // 画像の場合はそのコンテナ
658
+
540
-
541
- function moveTo(obj, targetPosX, targetPosY) {
659
+ function resizeTo(obj, targetWidth, targetHeight) {
542
-
543
- obj.css('left', targetPosX);
660
+
544
-
545
-
546
-
547
- if (typeof targetPosY !== 'undefined') {
661
+ if (typeof targetWidth !== 'undefined') {
548
-
662
+
549
- // targetPosY が指定されているときのみ変更する
663
+ // targetWidth が指定されているときのみ変更する
550
-
664
+
551
- obj.css('top', targetPosY);
665
+ obj.css('width', targetWidth)
552
666
 
553
667
  }
554
668
 
669
+
670
+
671
+ if (typeof targetHeight !== 'undefined') {
672
+
673
+ // targetHeight が指定されているときのみ変更する
674
+
675
+ obj.css('height', targetHeight);
676
+
677
+ }
678
+
555
679
  }
556
680
 
557
681
 
558
682
 
559
- // 画像、カーテンのサイズを変更する
683
+ // 画像をのせたコンテナをアニメーションでスライドインする
560
-
684
+
561
- function resizeTo(obj, targetWidth, targetHeight) {
685
+ function slideImgIn(imgWrapper, targetPosX) {
562
-
686
+
563
- obj.css('width', targetWidth)
687
+ imgWrapper.animate({
564
-
688
+
565
- .css('height', targetHeight);
689
+ 'left' : targetPosX
690
+
691
+ }, durationOfAnimation);
566
692
 
567
693
  }
568
694
 
569
695
 
570
696
 
571
- // 画像をのせたコンテナをアニメーションでスライドインする
697
+ // カーテンをアニメーションで開ける
572
-
698
+
573
- function slideImgIn(imgWrapper, targetPosX) {
699
+ function openCurtain(curtain, targetPosX) {
574
-
700
+
575
- imgWrapper.animate({
701
+ curtain.animate({
576
-
702
+
577
- 'left' : targetPosX
703
+ 'left' : targetPosX,
704
+
705
+ 'width' : 0
706
+
707
+ // 最終的に幅が 0 になる。
578
708
 
579
709
  }, durationOfAnimation);
580
710
 
@@ -582,24 +712,6 @@
582
712
 
583
713
 
584
714
 
585
- // カーテンをアニメーションで開ける
586
-
587
- function openCurtain(curtain, targetPosX) {
588
-
589
- curtain.animate({
590
-
591
- 'left' : targetPosX,
592
-
593
- 'width' : 0
594
-
595
- // 最終的に幅が 0 になる。
596
-
597
- }, durationOfAnimation);
598
-
599
- }
600
-
601
-
602
-
603
715
 
604
716
 
605
717
  // ブラウザの画面幅が変わったときに動作する。
@@ -614,71 +726,9 @@
614
726
 
615
727
  // カーテンはない
616
728
 
617
- (function(posX) {
618
-
619
- for (var index = 0; index < allImgs.length; index++) {
620
-
621
- if (! modeIn2Rows || index !== 0) {
622
-
623
- // 1段モード または 2段モード2番目以降の画像(下段)
624
-
625
- // 1段モードのとき、縦位置は 0 に戻す
626
-
627
- var posY = (modeIn2Rows ? heightOfLargerImg : 0);
628
-
629
- var heightOfImg = allImgSizes[index].ratio * widthOfImg;
630
-
631
-
632
-
633
- moveTo(allImgs[index].parent(), posX, posY);
634
-
635
-
636
-
637
- resizeTo(allImgs[index], widthOfImg, heightOfImg);
638
-
639
-
640
-
641
- // コンテナからの相対座標
642
-
643
- moveTo(allTexts[index],
644
-
645
- (widthOfImg - allTextSizes[index].width) / 2,
646
-
647
- (heightOfImg - allTextSizes[index].height) / 2);
648
-
649
-
650
-
651
- posX += widthOfImg;
652
-
653
- }
654
-
655
- else {
656
-
657
- // 2段モード かつ 最初の画像(上段)
658
-
659
- // 移動なし
660
-
661
- // 幅を画面いっぱいにする(縦横比はそのまま)
662
-
663
- resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
664
-
665
-
666
-
667
- // コンテナからの相対座標
668
-
669
- moveTo(allTexts[index],
670
-
671
- (widthOfLargerImg - allTextSizes[index].width) / 2,
672
-
673
- (heightOfLargerImg - allTextSizes[index].height) / 2);
674
-
675
- // posX += 0;
676
-
677
- }
678
-
679
- }
680
-
681
- })(0); // 最左の画像の位置は、ブラウザの画面と同じ
729
+ // 最左の画像の位置は、ブラウザの画面と同じ
730
+
731
+ placeObjects(0, 0, false);
682
732
 
683
733
  });
684
734
 
@@ -734,6 +784,16 @@
734
784
 
735
785
  </div>
736
786
 
787
+ <div id="menu">
788
+
789
+ <div class="menuItem" id="menuItem1">メニュー1</div>
790
+
791
+ <div class="menuItem" id="menuItem2">メニュー2</div>
792
+
793
+ <div class="menuItem" id="menuItem3">メニュー3</div>
794
+
795
+ </div>
796
+
737
797
  </body>
738
798
 
739
799
  </html>

8

文字を上下左右中央に来るようにコード修正

2017/02/16 06:20

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -60,6 +60,14 @@
60
60
 
61
61
  Safariでは画像のサイズ取得のタイミングが違っていました。
62
62
 
63
+
64
+
65
+ 修正
66
+
67
+
68
+
69
+ 文字を上下左右中央に来るようにしました。
70
+
63
71
  ```HTML
64
72
 
65
73
  <!DOCTYPE html>
@@ -208,16 +216,14 @@
208
216
 
209
217
  var heightOfLargerImg;
210
218
 
211
- // 画像にのせるテキストの下マージン(画像相対)
212
-
213
- var marginBottomBetweenTextAndImg = 20;
214
-
215
219
  // アニメーションが開始されたか否か
216
220
 
217
221
  var startedAnimation = false;
218
222
 
219
223
 
220
224
 
225
+
226
+
221
227
  // Safariの場合、ここでは早すぎて、画像のサイズを取得できない
222
228
 
223
229
  initializeAndStartAnimation();
@@ -280,9 +286,9 @@
280
286
 
281
287
  moveTo(allTexts[index],
282
288
 
283
- (widthOfImg - allTextSizes[index].width) / 2,
289
+ (widthOfImg - allTextSizes[index].width) / 2,
284
-
290
+
285
- heightOfImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
291
+ (heightOfImg - allTextSizes[index].height) / 2);
286
292
 
287
293
 
288
294
 
@@ -314,9 +320,9 @@
314
320
 
315
321
  moveTo(allTexts[index],
316
322
 
317
- (widthOfLargerImg - allTextSizes[index].width) / 2,
323
+ (widthOfLargerImg - allTextSizes[index].width) / 2,
318
-
324
+
319
- heightOfLargerImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
325
+ (heightOfLargerImg - allTextSizes[index].height) / 2);
320
326
 
321
327
  // posX += 0;
322
328
 
@@ -442,7 +448,7 @@
442
448
 
443
449
  // 画像のもとのサイズ、高さの最大値を取得
444
450
 
445
- if (allImgSizes.length < allImgs.length) {
451
+ if (allImgSizes.length < allImgs.length || maxHeightOfImg == 0) {
446
452
 
447
453
  // まだ取得できていないときのみ、取得する
448
454
 
@@ -550,8 +556,6 @@
550
556
 
551
557
 
552
558
 
553
-
554
-
555
559
  // 画像、カーテンのサイズを変更する
556
560
 
557
561
  function resizeTo(obj, targetWidth, targetHeight) {
@@ -578,8 +582,6 @@
578
582
 
579
583
 
580
584
 
581
-
582
-
583
585
  // カーテンをアニメーションで開ける
584
586
 
585
587
  function openCurtain(curtain, targetPosX) {
@@ -620,7 +622,7 @@
620
622
 
621
623
  // 1段モード または 2段モード2番目以降の画像(下段)
622
624
 
623
- // 縦位置は 0 に戻す
625
+ // 1段モードのとき、縦位置は 0 に戻す
624
626
 
625
627
  var posY = (modeIn2Rows ? heightOfLargerImg : 0);
626
628
 
@@ -640,9 +642,9 @@
640
642
 
641
643
  moveTo(allTexts[index],
642
644
 
643
- (widthOfImg - allTextSizes[index].width) / 2,
645
+ (widthOfImg - allTextSizes[index].width) / 2,
644
-
646
+
645
- heightOfImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
647
+ (heightOfImg - allTextSizes[index].height) / 2);
646
648
 
647
649
 
648
650
 
@@ -666,9 +668,9 @@
666
668
 
667
669
  moveTo(allTexts[index],
668
670
 
669
- (widthOfLargerImg - allTextSizes[index].width) / 2,
671
+ (widthOfLargerImg - allTextSizes[index].width) / 2,
670
-
672
+
671
- heightOfLargerImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
673
+ (heightOfLargerImg - allTextSizes[index].height) / 2);
672
674
 
673
675
  // posX += 0;
674
676
 
@@ -722,7 +724,7 @@
722
724
 
723
725
  <img src="img/second/04.jpg" id="img3" class="img">
724
726
 
725
- <div class="textOverImg" id="text3">3枚目 - 777</div>
727
+ <div class="textOverImg" id="text3">3枚目 - 777<br>2行目</div>
726
728
 
727
729
  </div>
728
730
 

7

IE, Firefox, Chrome, Safariで動作するように修正

2017/02/12 12:46

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -50,6 +50,16 @@
50
50
 
51
51
  IE, Firefox, Chromeで動きます。Safariは画像・文字の上下設定がうまくいきませんね。
52
52
 
53
+
54
+
55
+ 修正
56
+
57
+
58
+
59
+ IE, Firefox, Chrome, Safariで動きます。
60
+
61
+ Safariでは画像のサイズ取得のタイミングが違っていました。
62
+
53
63
  ```HTML
54
64
 
55
65
  <!DOCTYPE html>
@@ -202,25 +212,25 @@
202
212
 
203
213
  var marginBottomBetweenTextAndImg = 20;
204
214
 
205
-
215
+ // アニメーションが開始されたか否か
216
+
206
-
217
+ var startedAnimation = false;
218
+
219
+
220
+
207
-
221
+ // Safariの場合、ここでは早すぎて、画像のサイズを取得できない
222
+
208
-
223
+ initializeAndStartAnimation();
224
+
225
+
226
+
209
- // 画像のもとのサイズ、高さの最大値を算出
227
+ // 画像の読み込みが完了後に動作。
210
-
228
+
211
- allImgs.forEach(function(currentImg, index) {
229
+ $(window).on('load', function() {
230
+
212
-
231
+ // IEの場合、ここでは、アニメーションが正しく動作しない
232
+
213
- var width = currentImg.width();
233
+ initializeAndStartAnimation();
214
-
215
- var height = currentImg.height();
216
-
217
- var ratio = height / width; // 画像の縦横比
218
-
219
- allImgSizes[index] = { 'width' : width, 'height' : height, 'ratio' : ratio };
220
-
221
-
222
-
223
- maxHeightOfImg = Math.max(maxHeightOfImg, height);
224
234
 
225
235
  });
226
236
 
@@ -228,374 +238,448 @@
228
238
 
229
239
 
230
240
 
231
- // テキストのサイズを算出
232
-
233
- allTexts.forEach(function(currentImg, index) {
234
-
235
- var width = currentImg.width();
236
-
237
- var height = currentImg.height();
238
-
239
- allTextSizes[index] = { 'width' : width, 'height' : height };
241
+ function initializeAndStartAnimation() {
242
+
243
+ if (startedAnimation || ! calculateSizes()) {
244
+
245
+ return;
246
+
247
+ }
248
+
249
+ // アニメーションが開始されていず、サイズを計算できたときに続行
250
+
251
+
252
+
253
+ // ブラウザの画面幅があらかじめわからないので、CSSではなく、
254
+
255
+ // JavaScriptで、画像およびカーテンの初期位置・サイズを設定する。
256
+
257
+ (function(posX) {
258
+
259
+ for (var index = 0; index < allImgs.length; index++) {
260
+
261
+ if (! modeIn2Rows || index !== 0) {
262
+
263
+ // 1段モード または 2段モード2番目以降の画像(下段)
264
+
265
+ var posY = (modeIn2Rows ? heightOfLargerImg : undefined);
266
+
267
+ var heightOfImg = allImgSizes[index].ratio * widthOfImg;
268
+
269
+
270
+
271
+ moveTo(allImgs[index].parent(), posX, posY);
272
+
273
+
274
+
275
+ resizeTo(allImgs[index], widthOfImg, heightOfImg);
276
+
277
+
278
+
279
+ // コンテナからの相対座標
280
+
281
+ moveTo(allTexts[index],
282
+
283
+ (widthOfImg - allTextSizes[index].width) / 2,
284
+
285
+ heightOfImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
286
+
287
+
288
+
289
+ posX += widthOfImg;
290
+
291
+
292
+
293
+ moveTo(allCurtains[index], posX, posY);
294
+
295
+ resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg);
296
+
297
+ }
298
+
299
+ else {
300
+
301
+ // 2段モード かつ 最初の画像(上段)
302
+
303
+ moveTo(allImgs[index].parent(), 0 - widthOfLargerImg);
304
+
305
+
306
+
307
+ // 幅を画面いっぱいにする(縦横比はそのまま)
308
+
309
+ resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
310
+
311
+
312
+
313
+ // コンテナからの相対座標
314
+
315
+ moveTo(allTexts[index],
316
+
317
+ (widthOfLargerImg - allTextSizes[index].width) / 2,
318
+
319
+ heightOfLargerImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
320
+
321
+ // posX += 0;
322
+
323
+ // カーテンなし
324
+
325
+ }
326
+
327
+ }
328
+
329
+ })(0 - widthOfImg); // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
330
+
331
+
332
+
333
+
334
+
335
+ // 画像およびカーテンのアニメーション設定
336
+
337
+ (function(posX) {
338
+
339
+ for (var index = 0; index < allImgs.length; index++) {
340
+
341
+ if (! modeIn2Rows) {
342
+
343
+ // 1段モード
344
+
345
+ slideImgIn(allImgs[index].parent(), posX);
346
+
347
+
348
+
349
+ posX += widthOfImg;
350
+
351
+
352
+
353
+ openCurtain(allCurtains[index], posX);
354
+
355
+ }
356
+
357
+ else {
358
+
359
+ // 2段モード
360
+
361
+ if (index === 0) {
362
+
363
+ // 最初の画像
364
+
365
+ // 上段
366
+
367
+ slideImgIn(allImgs[index].parent(), posX);
368
+
369
+ // posX += 0;
370
+
371
+ // カーテンなし
372
+
373
+ }
374
+
375
+ else {
376
+
377
+ // 2番目以降の画像
378
+
379
+ // 下段
380
+
381
+ // setTimeoutのコールバック関数に変化する値を
382
+
383
+ // 正しくわたすため、forループの実行毎に異なるスコープを作る
384
+
385
+ (function(thisImg, thisCurtain, thisPosX) {
386
+
387
+ setTimeout(function() {
388
+
389
+ // 指定ミリ秒遅れて動作
390
+
391
+ slideImgIn(thisImg.parent(), thisPosX);
392
+
393
+
394
+
395
+ thisPosX += widthOfImg;
396
+
397
+
398
+
399
+ openCurtain(thisCurtain, thisPosX);
400
+
401
+ },
402
+
403
+ delayBetweenSlideIn);
404
+
405
+ })
406
+
407
+ (allImgs[index], allCurtains[index], posX);
408
+
409
+
410
+
411
+ posX += widthOfImg;
412
+
413
+ }
414
+
415
+ }
416
+
417
+ }
418
+
419
+ })(0); // 最左の画像の位置は、ブラウザの画面と同じ
420
+
421
+
422
+
423
+ startedAnimation = true;
424
+
425
+ }
426
+
427
+
428
+
429
+
430
+
431
+ /** ブラウザの画面幅に応じてサイズを(再)計算する
432
+
433
+ * @return true:正しく計算できた／false:正しく計算できなかった
434
+
435
+ */
436
+
437
+ function calculateSizes() {
438
+
439
+ var calculated = true;
440
+
441
+
442
+
443
+ // 画像のもとのサイズ、高さの最大値を取得
444
+
445
+ if (allImgSizes.length < allImgs.length) {
446
+
447
+ // まだ取得できていないときのみ、取得する
448
+
449
+ $.each(allImgs, function(index, currentImg) {
450
+
451
+ var width = currentImg.width();
452
+
453
+ var height = currentImg.height();
454
+
455
+
456
+
457
+ if (width == 0 || height == 0) {
458
+
459
+ // Safariで画像がまだロードされていない場合
460
+
461
+ calculated = false;
462
+
463
+ return;
464
+
465
+ }
466
+
467
+
468
+
469
+ var ratio = height / width; // 画像の縦横比
470
+
471
+ allImgSizes[index] = { 'width' : width, 'height' : height, 'ratio' : ratio };
472
+
473
+
474
+
475
+ maxHeightOfImg = Math.max(maxHeightOfImg, height);
476
+
477
+ });
478
+
479
+
480
+
481
+ if (! calculated) {
482
+
483
+ return false;
484
+
485
+ }
486
+
487
+ }
488
+
489
+
490
+
491
+ // テキストのサイズを取得
492
+
493
+ if (allTextSizes.length < allTexts.length) {
494
+
495
+ // まだ取得できていないときのみ、取得する
496
+
497
+ $.each(allTexts, function(index, currentText) {
498
+
499
+ var width = currentText.width();
500
+
501
+ var height = currentText.height();
502
+
503
+ allTextSizes[index] = { 'width' : width, 'height' : height };
504
+
505
+ });
506
+
507
+ }
508
+
509
+
510
+
511
+ var widthOfWindow = $(window).width();
512
+
513
+ modeIn2Rows = (widthOfWindow < discontinuousWidth);
514
+
515
+ widthOfImg = widthOfWindow / (modeIn2Rows ? allImgs.length - 1 : allImgs.length);
516
+
517
+ widthOfLargerImg = widthOfWindow;
518
+
519
+ heightOfLargerImg = allImgSizes[0].ratio * widthOfLargerImg;
520
+
521
+
522
+
523
+ return true;
524
+
525
+ }
526
+
527
+
528
+
529
+
530
+
531
+ // 画像、カーテンの位置を変更する
532
+
533
+ // 画像の場合はそのコンテナ
534
+
535
+ function moveTo(obj, targetPosX, targetPosY) {
536
+
537
+ obj.css('left', targetPosX);
538
+
539
+
540
+
541
+ if (typeof targetPosY !== 'undefined') {
542
+
543
+ // targetPosY が指定されているときのみ変更する
544
+
545
+ obj.css('top', targetPosY);
546
+
547
+ }
548
+
549
+ }
550
+
551
+
552
+
553
+
554
+
555
+ // 画像、カーテンのサイズを変更する
556
+
557
+ function resizeTo(obj, targetWidth, targetHeight) {
558
+
559
+ obj.css('width', targetWidth)
560
+
561
+ .css('height', targetHeight);
562
+
563
+ }
564
+
565
+
566
+
567
+ // 画像をのせたコンテナをアニメーションでスライドインする
568
+
569
+ function slideImgIn(imgWrapper, targetPosX) {
570
+
571
+ imgWrapper.animate({
572
+
573
+ 'left' : targetPosX
574
+
575
+ }, durationOfAnimation);
576
+
577
+ }
578
+
579
+
580
+
581
+
582
+
583
+ // カーテンをアニメーションで開ける
584
+
585
+ function openCurtain(curtain, targetPosX) {
586
+
587
+ curtain.animate({
588
+
589
+ 'left' : targetPosX,
590
+
591
+ 'width' : 0
592
+
593
+ // 最終的に幅が 0 になる。
594
+
595
+ }, durationOfAnimation);
596
+
597
+ }
598
+
599
+
600
+
601
+
602
+
603
+ // ブラウザの画面幅が変わったときに動作する。
604
+
605
+ $(window).on('resize', function() {
606
+
607
+ calculateSizes();
608
+
609
+
610
+
611
+ // ブラウザの画面幅に合わせて、画像の位置・サイズを再設定する。
612
+
613
+ // カーテンはない
614
+
615
+ (function(posX) {
616
+
617
+ for (var index = 0; index < allImgs.length; index++) {
618
+
619
+ if (! modeIn2Rows || index !== 0) {
620
+
621
+ // 1段モード または 2段モード2番目以降の画像(下段)
622
+
623
+ // 縦位置は 0 に戻す
624
+
625
+ var posY = (modeIn2Rows ? heightOfLargerImg : 0);
626
+
627
+ var heightOfImg = allImgSizes[index].ratio * widthOfImg;
628
+
629
+
630
+
631
+ moveTo(allImgs[index].parent(), posX, posY);
632
+
633
+
634
+
635
+ resizeTo(allImgs[index], widthOfImg, heightOfImg);
636
+
637
+
638
+
639
+ // コンテナからの相対座標
640
+
641
+ moveTo(allTexts[index],
642
+
643
+ (widthOfImg - allTextSizes[index].width) / 2,
644
+
645
+ heightOfImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
646
+
647
+
648
+
649
+ posX += widthOfImg;
650
+
651
+ }
652
+
653
+ else {
654
+
655
+ // 2段モード かつ 最初の画像(上段)
656
+
657
+ // 移動なし
658
+
659
+ // 幅を画面いっぱいにする(縦横比はそのまま)
660
+
661
+ resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
662
+
663
+
664
+
665
+ // コンテナからの相対座標
666
+
667
+ moveTo(allTexts[index],
668
+
669
+ (widthOfLargerImg - allTextSizes[index].width) / 2,
670
+
671
+ heightOfLargerImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
672
+
673
+ // posX += 0;
674
+
675
+ }
676
+
677
+ }
678
+
679
+ })(0); // 最左の画像の位置は、ブラウザの画面と同じ
240
680
 
241
681
  });
242
682
 
243
-
244
-
245
-
246
-
247
- calculateSizes();
248
-
249
-
250
-
251
-
252
-
253
- // ブラウザの画面幅に応じてサイズを(再)計算する
254
-
255
- function calculateSizes() {
256
-
257
- var widthOfWindow = $(window).width();
258
-
259
- modeIn2Rows = (widthOfWindow < discontinuousWidth);
260
-
261
- widthOfImg = widthOfWindow / (modeIn2Rows ? allImgs.length - 1 : allImgs.length);
262
-
263
- widthOfLargerImg = widthOfWindow;
264
-
265
- heightOfLargerImg = allImgSizes[0].ratio * widthOfLargerImg;
266
-
267
- }
268
-
269
-
270
-
271
-
272
-
273
- // 画像、カーテンの位置を変更する
274
-
275
- // 画像の場合はそのコンテナ
276
-
277
- function moveTo(obj, targetPosX, targetPosY) {
278
-
279
- obj.css('left', targetPosX);
280
-
281
-
282
-
283
- if (typeof targetPosY !== 'undefined') {
284
-
285
- // targetPosY が指定されているときのみ変更する
286
-
287
- obj.css('top', targetPosY);
288
-
289
- }
290
-
291
- }
292
-
293
-
294
-
295
-
296
-
297
- // 画像、カーテンのサイズを変更する
298
-
299
- function resizeTo(obj, targetWidth, targetHeight) {
300
-
301
- obj.css('width', targetWidth)
302
-
303
- .css('height', targetHeight);
304
-
305
- }
306
-
307
-
308
-
309
-
310
-
311
- // 画像をのせたコンテナをアニメーションでスライドインする
312
-
313
- function slideImgIn(imgWrapper, targetPosX) {
314
-
315
- imgWrapper.animate({
316
-
317
- 'left' : targetPosX
318
-
319
- }, durationOfAnimation);
320
-
321
- }
322
-
323
-
324
-
325
-
326
-
327
- // カーテンをアニメーションで開ける
328
-
329
- function openCurtain(curtain, targetPosX) {
330
-
331
- curtain.animate({
332
-
333
- 'left' : targetPosX,
334
-
335
- 'width' : 0
336
-
337
- // 最終的に幅が 0 になる。
338
-
339
- }, durationOfAnimation);
340
-
341
- }
342
-
343
-
344
-
345
-
346
-
347
- // ブラウザの画面幅があらかじめわからないので、CSSではなく、
348
-
349
- // JavaScriptで、画像およびカーテンの初期位置・サイズを設定する。
350
-
351
- (function(posX) {
352
-
353
- for (var index = 0; index < allImgs.length; index++) {
354
-
355
- if (! modeIn2Rows || index !== 0) {
356
-
357
- // 1段モード または 2段モード2番目以降の画像(下段)
358
-
359
- var posY = (modeIn2Rows ? heightOfLargerImg : undefined);
360
-
361
- var heightOfImg = allImgSizes[index].ratio * widthOfImg;
362
-
363
-
364
-
365
- moveTo(allImgs[index].parent(), posX, posY);
366
-
367
-
368
-
369
- resizeTo(allImgs[index], widthOfImg, heightOfImg);
370
-
371
-
372
-
373
- // コンテナから相対座標
374
-
375
- moveTo(allTexts[index],
376
-
377
- (widthOfImg - allTextSizes[index].width) / 2,
378
-
379
- heightOfImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
380
-
381
-
382
-
383
- posX += widthOfImg;
384
-
385
-
386
-
387
- moveTo(allCurtains[index], posX, posY);
388
-
389
- resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg);
390
-
391
- }
392
-
393
- else {
394
-
395
- // 2段モード かつ 最初の画像(上段)
396
-
397
- moveTo(allImgs[index].parent(), 0 - widthOfLargerImg);
398
-
399
-
400
-
401
- // 幅を画面いっぱいにする(縦横比はそのまま)
402
-
403
- resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
404
-
405
-
406
-
407
- // コンテナから相対座標
408
-
409
- moveTo(allTexts[index],
410
-
411
- (widthOfLargerImg - allTextSizes[index].width) / 2,
412
-
413
- heightOfLargerImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
414
-
415
- // posX += 0;
416
-
417
- // カーテンなし
418
-
419
- }
420
-
421
- }
422
-
423
- })(0 - widthOfImg); // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
424
-
425
-
426
-
427
-
428
-
429
- // 画像およびカーテンのアニメーション設定
430
-
431
- (function(posX) {
432
-
433
- for (var index = 0; index < allImgs.length; index++) {
434
-
435
- if (! modeIn2Rows) {
436
-
437
- // 1段モード
438
-
439
- slideImgIn(allImgs[index].parent(), posX);
440
-
441
-
442
-
443
- posX += widthOfImg;
444
-
445
-
446
-
447
- openCurtain(allCurtains[index], posX);
448
-
449
- }
450
-
451
- else {
452
-
453
- // 2段モード
454
-
455
- if (index === 0) {
456
-
457
- // 最初の画像
458
-
459
- // 上段
460
-
461
- slideImgIn(allImgs[index].parent(), posX);
462
-
463
- // posX += 0;
464
-
465
- // カーテンなし
466
-
467
- }
468
-
469
- else {
470
-
471
- // 2番目以降の画像
472
-
473
- // 下段
474
-
475
- // setTimeoutのコールバック関数に変化する値を
476
-
477
- // 正しくわたすため、forループの実行毎に異なるスコープを作る
478
-
479
- (function(thisImg, thisCurtain, thisPosX) {
480
-
481
- setTimeout(function() {
482
-
483
- // 指定ミリ秒遅れて動作
484
-
485
- slideImgIn(thisImg.parent(), thisPosX);
486
-
487
-
488
-
489
- thisPosX += widthOfImg;
490
-
491
-
492
-
493
- openCurtain(thisCurtain, thisPosX);
494
-
495
- },
496
-
497
- delayBetweenSlideIn);
498
-
499
- })
500
-
501
- (allImgs[index], allCurtains[index], posX);
502
-
503
-
504
-
505
- posX += widthOfImg;
506
-
507
- }
508
-
509
- }
510
-
511
- }
512
-
513
- })(0); // 最左の画像の位置は、ブラウザの画面と同じ
514
-
515
-
516
-
517
-
518
-
519
- // ブラウザの画面幅が変わったときに動作する。
520
-
521
- $(window).on('resize', function() {
522
-
523
- calculateSizes();
524
-
525
-
526
-
527
- // ブラウザの画面幅に合わせて、画像の位置・サイズを再設定する。
528
-
529
- // カーテンはない
530
-
531
- (function(posX) {
532
-
533
- for (var index = 0; index < allImgs.length; index++) {
534
-
535
- if (! modeIn2Rows || index !== 0) {
536
-
537
- // 1段モード または 2段モード2番目以降の画像(下段)
538
-
539
- // 縦位置は 0 に戻す
540
-
541
- var posY = (modeIn2Rows ? heightOfLargerImg : 0);
542
-
543
- var heightOfImg = allImgSizes[index].ratio * widthOfImg;
544
-
545
-
546
-
547
- moveTo(allImgs[index].parent(), posX, posY);
548
-
549
-
550
-
551
- resizeTo(allImgs[index], widthOfImg, heightOfImg);
552
-
553
-
554
-
555
- // コンテナから相対座標
556
-
557
- moveTo(allTexts[index],
558
-
559
- (widthOfImg - allTextSizes[index].width) / 2,
560
-
561
- heightOfImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
562
-
563
-
564
-
565
- posX += widthOfImg;
566
-
567
- }
568
-
569
- else {
570
-
571
- // 2段モード かつ 最初の画像(上段)
572
-
573
- // 移動なし
574
-
575
- // 幅を画面いっぱいにする(縦横比はそのまま)
576
-
577
- resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
578
-
579
-
580
-
581
- // コンテナから相対座標
582
-
583
- moveTo(allTexts[index],
584
-
585
- (widthOfLargerImg - allTextSizes[index].width) / 2,
586
-
587
- heightOfLargerImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
588
-
589
- // posX += 0;
590
-
591
- }
592
-
593
- }
594
-
595
- })(0); // 最左の画像の位置は、ブラウザの画面と同じ
596
-
597
- });
598
-
599
683
  });
600
684
 
601
685
  </script>

6

IE, Firefox, Chromeで動くようにコード修正

2017/02/11 13:29

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -42,6 +42,14 @@
42
42
 
43
43
  画像にテキストをのせ、画像を伸縮するにはこうです。
44
44
 
45
+
46
+
47
+ 修正
48
+
49
+
50
+
51
+ IE, Firefox, Chromeで動きます。Safariは画像・文字の上下設定がうまくいきませんね。
52
+
45
53
  ```HTML
46
54
 
47
55
  <!DOCTYPE html>
@@ -88,36 +96,48 @@
88
96
 
89
97
  z-index : 0;
90
98
 
99
+ }
100
+
101
+
102
+
103
+ .curtain {
104
+
105
+ position : absolute;
106
+
107
+ z-index : 1; /* 画像より手前 */
108
+
109
+ background-color : white;
110
+
111
+ }
112
+
113
+
114
+
115
+ .img {
116
+
117
+ position : absolute;
118
+
119
+ z-index : 0;
120
+
121
+ }
122
+
123
+
124
+
125
+ .textOverImg /* 画像にのせるテキスト */ {
126
+
127
+ position : absolute;
128
+
129
+ width : 180px;
130
+
131
+ height : 30px;
132
+
133
+ color : white;
134
+
135
+ font-size : x-large;
136
+
91
137
  text-align : center;
92
138
 
93
139
  }
94
140
 
95
-
96
-
97
- .curtain {
98
-
99
- position : absolute;
100
-
101
- z-index : 1; /* 画像より手前 */
102
-
103
- background-color : white;
104
-
105
- }
106
-
107
-
108
-
109
- .textOnImg /* 画像にのせるテキスト */ {
110
-
111
- position : absolute;
112
-
113
- bottom :50px;
114
-
115
- color : white;
116
-
117
- font-size : xx-large;
118
-
119
- }
120
-
121
141
  </style>
122
142
 
123
143
  <script src="jquery-2.1.4.js"></script>
@@ -142,6 +162,14 @@
142
162
 
143
163
  var allImgSizes = [];
144
164
 
165
+ // 画像にのせるテキストのdivコンテナ全て(左から)
166
+
167
+ var allTexts = [ $('#text1'), $('#text2'), $('#text3') ];
168
+
169
+ // 画像にのせるテキストのサイズ(幅、高さ)全て(左から)
170
+
171
+ var allTextSizes = [];
172
+
145
173
  // 画像のもとの高さの最大値
146
174
 
147
175
  var maxHeightOfImg = 0;
@@ -170,6 +198,10 @@
170
198
 
171
199
  var heightOfLargerImg;
172
200
 
201
+ // 画像にのせるテキストの下マージン(画像相対)
202
+
203
+ var marginBottomBetweenTextAndImg = 20;
204
+
173
205
 
174
206
 
175
207
 
@@ -196,6 +228,22 @@
196
228
 
197
229
 
198
230
 
231
+ // テキストのサイズを算出
232
+
233
+ allTexts.forEach(function(currentImg, index) {
234
+
235
+ var width = currentImg.width();
236
+
237
+ var height = currentImg.height();
238
+
239
+ allTextSizes[index] = { 'width' : width, 'height' : height };
240
+
241
+ });
242
+
243
+
244
+
245
+
246
+
199
247
  calculateSizes();
200
248
 
201
249
 
@@ -268,19 +316,7 @@
268
316
 
269
317
  'left' : targetPosX
270
318
 
271
- }, durationOfAnimation,
319
+ }, durationOfAnimation);
272
-
273
- // アニメーション完了時に動作する
274
-
275
- function() {
276
-
277
- // アニメーション中は overflow : hidden になっているので、
278
-
279
- // アニメーション完了後も overflow : hidden にする。
280
-
281
- $(this).css('overflow', 'hidden');
282
-
283
- });
284
320
 
285
321
  }
286
322
 
@@ -316,15 +352,91 @@
316
352
 
317
353
  for (var index = 0; index < allImgs.length; index++) {
318
354
 
355
+ if (! modeIn2Rows || index !== 0) {
356
+
357
+ // 1段モード または 2段モード2番目以降の画像(下段)
358
+
359
+ var posY = (modeIn2Rows ? heightOfLargerImg : undefined);
360
+
361
+ var heightOfImg = allImgSizes[index].ratio * widthOfImg;
362
+
363
+
364
+
365
+ moveTo(allImgs[index].parent(), posX, posY);
366
+
367
+
368
+
369
+ resizeTo(allImgs[index], widthOfImg, heightOfImg);
370
+
371
+
372
+
373
+ // コンテナから相対座標
374
+
375
+ moveTo(allTexts[index],
376
+
377
+ (widthOfImg - allTextSizes[index].width) / 2,
378
+
379
+ heightOfImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
380
+
381
+
382
+
383
+ posX += widthOfImg;
384
+
385
+
386
+
387
+ moveTo(allCurtains[index], posX, posY);
388
+
389
+ resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg);
390
+
391
+ }
392
+
393
+ else {
394
+
395
+ // 2段モード かつ 最初の画像(上段)
396
+
397
+ moveTo(allImgs[index].parent(), 0 - widthOfLargerImg);
398
+
399
+
400
+
401
+ // 幅を画面いっぱいにする(縦横比はそのまま)
402
+
403
+ resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
404
+
405
+
406
+
407
+ // コンテナから相対座標
408
+
409
+ moveTo(allTexts[index],
410
+
411
+ (widthOfLargerImg - allTextSizes[index].width) / 2,
412
+
413
+ heightOfLargerImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
414
+
415
+ // posX += 0;
416
+
417
+ // カーテンなし
418
+
419
+ }
420
+
421
+ }
422
+
423
+ })(0 - widthOfImg); // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
424
+
425
+
426
+
427
+
428
+
429
+ // 画像およびカーテンのアニメーション設定
430
+
431
+ (function(posX) {
432
+
433
+ for (var index = 0; index < allImgs.length; index++) {
434
+
319
435
  if (! modeIn2Rows) {
320
436
 
321
437
  // 1段モード
322
438
 
323
- moveTo(allImgs[index].parent(), posX);
439
+ slideImgIn(allImgs[index].parent(), posX);
324
-
325
- var heightOfImg = allImgSizes[index].ratio * widthOfImg;
326
-
327
- resizeTo(allImgs[index], widthOfImg, heightOfImg);
328
440
 
329
441
 
330
442
 
@@ -332,9 +444,7 @@
332
444
 
333
445
 
334
446
 
335
- moveTo(allCurtains[index], posX);
447
+ openCurtain(allCurtains[index], posX);
336
-
337
- resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg);
338
448
 
339
449
  }
340
450
 
@@ -348,216 +458,140 @@
348
458
 
349
459
  // 上段
350
460
 
461
+ slideImgIn(allImgs[index].parent(), posX);
462
+
463
+ // posX += 0;
464
+
465
+ // カーテンなし
466
+
467
+ }
468
+
469
+ else {
470
+
471
+ // 2番目以降の画像
472
+
473
+ // 下段
474
+
475
+ // setTimeoutのコールバック関数に変化する値を
476
+
477
+ // 正しくわたすため、forループの実行毎に異なるスコープを作る
478
+
479
+ (function(thisImg, thisCurtain, thisPosX) {
480
+
481
+ setTimeout(function() {
482
+
483
+ // 指定ミリ秒遅れて動作
484
+
485
+ slideImgIn(thisImg.parent(), thisPosX);
486
+
487
+
488
+
489
+ thisPosX += widthOfImg;
490
+
491
+
492
+
493
+ openCurtain(thisCurtain, thisPosX);
494
+
495
+ },
496
+
497
+ delayBetweenSlideIn);
498
+
499
+ })
500
+
501
+ (allImgs[index], allCurtains[index], posX);
502
+
503
+
504
+
505
+ posX += widthOfImg;
506
+
507
+ }
508
+
509
+ }
510
+
511
+ }
512
+
513
+ })(0); // 最左の画像の位置は、ブラウザの画面と同じ
514
+
515
+
516
+
517
+
518
+
519
+ // ブラウザの画面幅が変わったときに動作する。
520
+
521
+ $(window).on('resize', function() {
522
+
523
+ calculateSizes();
524
+
525
+
526
+
527
+ // ブラウザの画面幅に合わせて、画像の位置・サイズを再設定する。
528
+
529
+ // カーテンはない
530
+
531
+ (function(posX) {
532
+
533
+ for (var index = 0; index < allImgs.length; index++) {
534
+
535
+ if (! modeIn2Rows || index !== 0) {
536
+
537
+ // 1段モード または 2段モード2番目以降の画像(下段)
538
+
539
+ // 縦位置は 0 に戻す
540
+
541
+ var posY = (modeIn2Rows ? heightOfLargerImg : 0);
542
+
543
+ var heightOfImg = allImgSizes[index].ratio * widthOfImg;
544
+
545
+
546
+
351
- moveTo(allImgs[index].parent(), 0 - widthOfLargerImg);
547
+ moveTo(allImgs[index].parent(), posX, posY);
548
+
549
+
550
+
551
+ resizeTo(allImgs[index], widthOfImg, heightOfImg);
552
+
553
+
554
+
555
+ // コンテナから相対座標
556
+
557
+ moveTo(allTexts[index],
558
+
559
+ (widthOfImg - allTextSizes[index].width) / 2,
560
+
561
+ heightOfImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
562
+
563
+
564
+
565
+ posX += widthOfImg;
566
+
567
+ }
568
+
569
+ else {
570
+
571
+ // 2段モード かつ 最初の画像(上段)
572
+
573
+ // 移動なし
352
574
 
353
575
  // 幅を画面いっぱいにする(縦横比はそのまま)
354
576
 
355
577
  resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
356
578
 
579
+
580
+
581
+ // コンテナから相対座標
582
+
583
+ moveTo(allTexts[index],
584
+
585
+ (widthOfLargerImg - allTextSizes[index].width) / 2,
586
+
587
+ heightOfLargerImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
588
+
357
589
  // posX += 0;
358
590
 
359
- // カーテンなし
360
-
361
591
  }
362
592
 
363
- else {
364
-
365
- // 2番目以降の画像
366
-
367
- // 下段
368
-
369
- moveTo(allImgs[index].parent(), posX, heightOfLargerImg);
370
-
371
- var heightOfImg = allImgSizes[index].ratio * widthOfImg;
372
-
373
- resizeTo(allImgs[index], widthOfImg, heightOfImg);
374
-
375
-
376
-
377
- posX += widthOfImg;
378
-
379
-
380
-
381
- moveTo(allCurtains[index], posX, heightOfLargerImg);
382
-
383
- resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg);
384
-
385
- }
386
-
387
593
  }
388
594
 
389
- }
390
-
391
- })(0 - widthOfImg); // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
392
-
393
-
394
-
395
-
396
-
397
- // 画像およびカーテンのアニメーション設定
398
-
399
- (function(posX) {
400
-
401
- for (var index = 0; index < allImgs.length; index++) {
402
-
403
- if (! modeIn2Rows) {
404
-
405
- // 1段モード
406
-
407
- slideImgIn(allImgs[index].parent(), posX);
408
-
409
-
410
-
411
- posX += widthOfImg;
412
-
413
-
414
-
415
- openCurtain(allCurtains[index], posX);
416
-
417
- }
418
-
419
- else {
420
-
421
- // 2段モード
422
-
423
- if (index === 0) {
424
-
425
- // 最初の画像
426
-
427
- // 上段
428
-
429
- slideImgIn(allImgs[index].parent(), posX);
430
-
431
- // posX += 0;
432
-
433
- // カーテンなし
434
-
435
- }
436
-
437
- else {
438
-
439
- // 2番目以降の画像
440
-
441
- // 下段
442
-
443
- // setTimeoutのコールバック関数に変化する値を
444
-
445
- // 正しくわたすため、forループの実行毎に異なるスコープを作る
446
-
447
- (function(thisImg, thisCurtain, thisPosX) {
448
-
449
- setTimeout(function() {
450
-
451
- // 指定ミリ秒遅れて動作
452
-
453
- slideImgIn(thisImg.parent(), thisPosX);
454
-
455
-
456
-
457
- thisPosX += widthOfImg;
458
-
459
-
460
-
461
- openCurtain(thisCurtain, thisPosX);
462
-
463
- },
464
-
465
- delayBetweenSlideIn);
466
-
467
- })
468
-
469
- (allImgs[index], allCurtains[index], posX);
470
-
471
-
472
-
473
- posX += widthOfImg;
474
-
475
- }
476
-
477
- }
478
-
479
- }
480
-
481
- })(0); // 最左の画像の位置は、ブラウザの画面と同じ
482
-
483
-
484
-
485
-
486
-
487
- // ブラウザの画面幅が変わったときに動作する。
488
-
489
- $(window).on('resize', function() {
490
-
491
- calculateSizes();
492
-
493
-
494
-
495
- // ブラウザの画面幅に合わせて、画像の位置・サイズを再設定する。
496
-
497
- // カーテンはない
498
-
499
- (function(posX) {
500
-
501
- for (var index = 0; index < allImgs.length; index++) {
502
-
503
- if (! modeIn2Rows) {
504
-
505
- // 1段モード
506
-
507
- // 縦位置は 0 に戻す
508
-
509
- moveTo(allImgs[index].parent(), posX, 0);
510
-
511
- var heightOfImg = allImgSizes[index].ratio * widthOfImg;
512
-
513
- resizeTo(allImgs[index], widthOfImg, heightOfImg);
514
-
515
-
516
-
517
- posX += widthOfImg;
518
-
519
- }
520
-
521
- else {
522
-
523
- // 2段モード
524
-
525
- if (index === 0) {
526
-
527
- // 最初の画像
528
-
529
- // 移動なし、上段
530
-
531
- // 幅を画面いっぱいにする(縦横比はそのまま)
532
-
533
- resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
534
-
535
- // posX += 0;
536
-
537
- }
538
-
539
- else {
540
-
541
- // 2番目以降の画像
542
-
543
- // 下段
544
-
545
- moveTo(allImgs[index].parent(), posX, heightOfLargerImg);
546
-
547
- var heightOfImg = allImgSizes[index].ratio * widthOfImg;
548
-
549
- resizeTo(allImgs[index], widthOfImg, heightOfImg);
550
-
551
-
552
-
553
- posX += widthOfImg;
554
-
555
- }
556
-
557
- }
558
-
559
- }
560
-
561
595
  })(0); // 最左の画像の位置は、ブラウザの画面と同じ
562
596
 
563
597
  });
@@ -576,7 +610,7 @@
576
610
 
577
611
  <img src="img/second/02.jpg" id="img1" class="img">
578
612
 
579
- <span class="textOnImg">1枚目</span>
613
+ <div class="textOverImg" id="text1">1枚目</div>
580
614
 
581
615
  </div>
582
616
 
@@ -590,7 +624,7 @@
590
624
 
591
625
  <img src="img/second/03.jpg" id="img2" class="img">
592
626
 
593
- <span class="textOnImg">2枚目</span>
627
+ <div class="textOverImg" id="text2">2枚目 = my tune</div>
594
628
 
595
629
  </div>
596
630
 
@@ -604,7 +638,7 @@
604
638
 
605
639
  <img src="img/second/04.jpg" id="img3" class="img">
606
640
 
607
- <span class="textOnImg">3枚目</span>
641
+ <div class="textOverImg" id="text3">3枚目 - 777</div>
608
642
 
609
643
  </div>
610
644
 

5

画像にテキストをのせ、画像を伸縮するようにコード修正

2017/02/06 13:39

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -34,6 +34,14 @@
34
34
 
35
35
  ブラウザの画面幅が1000ピクセル未満の場合、1段目がスライドインして1.5秒後に2段目がスライドインします。
36
36
 
37
+
38
+
39
+ 修正
40
+
41
+
42
+
43
+ 画像にテキストをのせ、画像を伸縮するにはこうです。
44
+
37
45
  ```HTML
38
46
 
39
47
  <!DOCTYPE html>
@@ -74,12 +82,14 @@
74
82
 
75
83
 
76
84
 
77
- .img {
85
+ .imgWrapper /* 1枚の画像およびテキストをのせたdivコンテナ */ {
78
86
 
79
87
  position : absolute;
80
88
 
81
89
  z-index : 0;
82
90
 
91
+ text-align : center;
92
+
83
93
  }
84
94
 
85
95
 
@@ -88,12 +98,26 @@
88
98
 
89
99
  position : absolute;
90
100
 
91
- z-index : 1; /* 画像より手前 */
101
+ z-index : 1; /* 画像より手前 */
92
102
 
93
103
  background-color : white;
94
104
 
95
105
  }
96
106
 
107
+
108
+
109
+ .textOnImg /* 画像にのせるテキスト */ {
110
+
111
+ position : absolute;
112
+
113
+ bottom :50px;
114
+
115
+ color : white;
116
+
117
+ font-size : xx-large;
118
+
119
+ }
120
+
97
121
  </style>
98
122
 
99
123
  <script src="jquery-2.1.4.js"></script>
@@ -200,6 +224,8 @@
200
224
 
201
225
  // 画像、カーテンの位置を変更する
202
226
 
227
+ // 画像の場合はそのコンテナ
228
+
203
229
  function moveTo(obj, targetPosX, targetPosY) {
204
230
 
205
231
  obj.css('left', targetPosX);
@@ -234,11 +260,11 @@
234
260
 
235
261
 
236
262
 
237
- // 画像をアニメーションでスライドインする
263
+ // 画像をのせたコンテナをアニメーションでスライドインする
238
-
264
+
239
- function slideImgIn(img, targetPosX) {
265
+ function slideImgIn(imgWrapper, targetPosX) {
240
-
266
+
241
- img.animate({
267
+ imgWrapper.animate({
242
268
 
243
269
  'left' : targetPosX
244
270
 
@@ -294,7 +320,11 @@
294
320
 
295
321
  // 1段モード
296
322
 
297
- moveTo(allImgs[index], posX);
323
+ moveTo(allImgs[index].parent(), posX);
324
+
325
+ var heightOfImg = allImgSizes[index].ratio * widthOfImg;
326
+
327
+ resizeTo(allImgs[index], widthOfImg, heightOfImg);
298
328
 
299
329
 
300
330
 
@@ -318,7 +348,7 @@
318
348
 
319
349
  // 上段
320
350
 
321
- moveTo(allImgs[index], 0 - widthOfLargerImg);
351
+ moveTo(allImgs[index].parent(), 0 - widthOfLargerImg);
322
352
 
323
353
  // 幅を画面いっぱいにする(縦横比はそのまま)
324
354
 
@@ -336,7 +366,11 @@
336
366
 
337
367
  // 下段
338
368
 
339
- moveTo(allImgs[index], posX, heightOfLargerImg);
369
+ moveTo(allImgs[index].parent(), posX, heightOfLargerImg);
370
+
371
+ var heightOfImg = allImgSizes[index].ratio * widthOfImg;
372
+
373
+ resizeTo(allImgs[index], widthOfImg, heightOfImg);
340
374
 
341
375
 
342
376
 
@@ -370,7 +404,7 @@
370
404
 
371
405
  // 1段モード
372
406
 
373
- slideImgIn(allImgs[index], posX);
407
+ slideImgIn(allImgs[index].parent(), posX);
374
408
 
375
409
 
376
410
 
@@ -392,7 +426,7 @@
392
426
 
393
427
  // 上段
394
428
 
395
- slideImgIn(allImgs[index], posX);
429
+ slideImgIn(allImgs[index].parent(), posX);
396
430
 
397
431
  // posX += 0;
398
432
 
@@ -416,7 +450,7 @@
416
450
 
417
451
  // 指定ミリ秒遅れて動作
418
452
 
419
- slideImgIn(thisImg, thisPosX);
453
+ slideImgIn(thisImg.parent(), thisPosX);
420
454
 
421
455
 
422
456
 
@@ -472,11 +506,11 @@
472
506
 
473
507
  // 縦位置は 0 に戻す
474
508
 
475
- moveTo(allImgs[index], posX, 0);
509
+ moveTo(allImgs[index].parent(), posX, 0);
476
-
510
+
477
- // サイズを元に戻す
511
+ var heightOfImg = allImgSizes[index].ratio * widthOfImg;
478
-
512
+
479
- resizeTo(allImgs[index], allImgSizes[index].width, allImgSizes[index].height);
513
+ resizeTo(allImgs[index], widthOfImg, heightOfImg);
480
514
 
481
515
 
482
516
 
@@ -508,7 +542,11 @@
508
542
 
509
543
  // 下段
510
544
 
511
- moveTo(allImgs[index], posX, heightOfLargerImg);
545
+ moveTo(allImgs[index].parent(), posX, heightOfLargerImg);
546
+
547
+ var heightOfImg = allImgSizes[index].ratio * widthOfImg;
548
+
549
+ resizeTo(allImgs[index], widthOfImg, heightOfImg);
512
550
 
513
551
 
514
552
 
@@ -532,21 +570,49 @@
532
570
 
533
571
  <body>
534
572
 
535
- <div id="container">
573
+ <div id="container">
574
+
536
-
575
+ <div id="imgWrapper1" class="imgWrapper">
576
+
537
- <img src="img/second/02.jpg" id="img1" class="img">
577
+ <img src="img/second/02.jpg" id="img1" class="img">
578
+
538
-
579
+ <span class="textOnImg">1枚目</span>
580
+
581
+ </div>
582
+
583
+
584
+
539
- <div id="curtain1" class="curtain"></div>
585
+ <div id="curtain1" class="curtain"></div>
586
+
587
+
588
+
540
-
589
+ <div id="imgWrapper2" class="imgWrapper">
590
+
541
- <img src="img/second/03.jpg" id="img2" class="img">
591
+ <img src="img/second/03.jpg" id="img2" class="img">
592
+
542
-
593
+ <span class="textOnImg">2枚目</span>
594
+
595
+ </div>
596
+
597
+
598
+
543
- <div id="curtain2" class="curtain"></div>
599
+ <div id="curtain2" class="curtain"></div>
600
+
601
+
602
+
544
-
603
+ <div id="imgWrapper3" class="imgWrapper">
604
+
545
- <img src="img/second/04.jpg" id="img3" class="img">
605
+ <img src="img/second/04.jpg" id="img3" class="img">
606
+
546
-
607
+ <span class="textOnImg">3枚目</span>
608
+
609
+ </div>
610
+
611
+
612
+
547
- <div id="curtain3" class="curtain"></div>
613
+ <div id="curtain3" class="curtain"></div>
548
-
614
+
549
- </div>
615
+ </div>
550
616
 
551
617
  </body>
552
618
 

4

コメントを受けて、遅延スライドインするように修正

2017/02/05 07:19

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -26,6 +26,14 @@
26
26
 
27
27
  PCでもブラウザ幅を変えると2段になりますよ。
28
28
 
29
+
30
+
31
+ 修正
32
+
33
+
34
+
35
+ ブラウザの画面幅が1000ピクセル未満の場合、1段目がスライドインして1.5秒後に2段目がスライドインします。
36
+
29
37
  ```HTML
30
38
 
31
39
  <!DOCTYPE html>
@@ -94,246 +102,424 @@
94
102
 
95
103
  $(function() {
96
104
 
105
+ // スライドインする時間差
106
+
107
+ var delayBetweenSlideIn = 1500; // milliseconds
108
+
109
+ // アニメーションの時間
110
+
97
- var animatedDuration = 800; // milliseconds
111
+ var durationOfAnimation = 800; // milliseconds
98
112
 
99
113
  // スライドインする画像のオブジェクト全て(左から)
100
114
 
101
115
  var allImgs = [ $('#img1'), $('#img2'), $('#img3') ];
102
116
 
117
+ // 画像のもとのサイズ(幅、高さ、縦横比)全て(左から)
118
+
119
+ var allImgSizes = [];
120
+
121
+ // 画像のもとの高さの最大値
122
+
123
+ var maxHeightOfImg = 0;
124
+
103
125
  // 画像を隠すカーテンのオブジェクト全て(左から)
104
126
 
105
127
  var allCurtains = [ $('#curtain1'), $('#curtain2'), $('#curtain3') ];
106
128
 
107
-
108
-
109
- var discontinuousWidth = 1000; // ブラウザの画面幅がこの値より狭くなると2段モード
129
+ // ブラウザの画面幅がこの値より狭くなると2段モード
110
-
111
- var originalWidthOfImg = 700; // 画像の元の幅
130
+
112
-
113
- var originalHeightOfImg = 400; // 画像の元の高さ
114
-
115
- var ratioOfImg = originalHeightOfImg / originalWidthOfImg; // 画像の縦・横の比
116
-
117
-
118
-
119
- var widthOfWindow;
131
+ var discontinuousWidth = 1000;
120
-
121
- var heightOfWindow;
132
+
122
-
123
- var modeIn2Rows; // 2段にするか否か
133
+ // 2段にするか否か
134
+
135
+ var modeIn2Rows;
136
+
137
+ // 画像の実際の幅
124
138
 
125
139
  var widthOfImg;
126
140
 
141
+ // 大きい方の画像の実際の幅
142
+
143
+ var widthOfLargerImg;
144
+
145
+ // 大きい方の画像の実際の高さ
146
+
127
- var heightOfImg;
147
+ var heightOfLargerImg;
148
+
149
+
150
+
151
+
152
+
128
-
153
+ // 画像のもとのサイズ、高さの最大値を算出
154
+
129
-
155
+ allImgs.forEach(function(currentImg, index) {
156
+
157
+ var width = currentImg.width();
158
+
159
+ var height = currentImg.height();
160
+
161
+ var ratio = height / width; // 画像の縦横比
162
+
163
+ allImgSizes[index] = { 'width' : width, 'height' : height, 'ratio' : ratio };
164
+
165
+
166
+
167
+ maxHeightOfImg = Math.max(maxHeightOfImg, height);
168
+
169
+ });
170
+
171
+
172
+
173
+
174
+
175
+ calculateSizes();
176
+
177
+
178
+
179
+
180
+
181
+ // ブラウザの画面幅に応じてサイズを(再)計算する
130
182
 
131
183
  function calculateSizes() {
132
184
 
133
- widthOfWindow = $(window).width();
185
+ var widthOfWindow = $(window).width();
134
-
135
- heightOfWindow = $(window).height();
136
186
 
137
187
  modeIn2Rows = (widthOfWindow < discontinuousWidth);
138
188
 
139
- widthOfImg = widthOfWindow / (modeIn2Rows ? allImgs.length - 1 : allImgs.length);
189
+ widthOfImg = widthOfWindow / (modeIn2Rows ? allImgs.length - 1 : allImgs.length);
190
+
140
-
191
+ widthOfLargerImg = widthOfWindow;
192
+
141
- heightOfImg = ratioOfImg * widthOfImg;
193
+ heightOfLargerImg = allImgSizes[0].ratio * widthOfLargerImg;
142
194
 
143
195
  }
144
196
 
145
197
 
146
198
 
199
+
200
+
201
+ // 画像、カーテンの位置を変更する
202
+
203
+ function moveTo(obj, targetPosX, targetPosY) {
204
+
147
- calculateSizes();
205
+ obj.css('left', targetPosX);
206
+
207
+
208
+
148
-
209
+ if (typeof targetPosY !== 'undefined') {
210
+
149
-
211
+ // targetPosY が指定されているときのみ変更する
212
+
150
-
213
+ obj.css('top', targetPosY);
214
+
215
+ }
216
+
217
+ }
218
+
219
+
220
+
221
+
222
+
151
- // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
223
+ // 画像、カーテンのサイズを変更する
224
+
225
+ function resizeTo(obj, targetWidth, targetHeight) {
226
+
227
+ obj.css('width', targetWidth)
228
+
229
+ .css('height', targetHeight);
230
+
231
+ }
232
+
233
+
234
+
235
+
236
+
237
+ // 画像をアニメーションでスライドインする
238
+
239
+ function slideImgIn(img, targetPosX) {
240
+
241
+ img.animate({
242
+
243
+ 'left' : targetPosX
244
+
245
+ }, durationOfAnimation,
246
+
247
+ // アニメーション完了時に動作する
248
+
249
+ function() {
250
+
251
+ // アニメーション中は overflow : hidden になっているので、
252
+
253
+ // アニメーション完了後も overflow : hidden にする。
254
+
255
+ $(this).css('overflow', 'hidden');
256
+
257
+ });
258
+
259
+ }
260
+
261
+
262
+
263
+
264
+
265
+ // カーテンをアニメーションで開ける
266
+
267
+ function openCurtain(curtain, targetPosX) {
268
+
269
+ curtain.animate({
270
+
271
+ 'left' : targetPosX,
272
+
273
+ 'width' : 0
274
+
275
+ // 最終的に幅が 0 になる。
276
+
277
+ }, durationOfAnimation);
278
+
279
+ }
280
+
281
+
282
+
283
+
152
284
 
153
285
  // ブラウザの画面幅があらかじめわからないので、CSSではなく、
154
286
 
155
- // JavaScriptで、画像およびカーテンの初期位置・幅を設定する。
287
+ // JavaScriptで、画像およびカーテンの初期位置・サイズを設定する。
156
-
288
+
157
- (function(pos) {
289
+ (function(posX) {
158
-
290
+
159
- for (var i = 0; i < allImgs.length; i++)
291
+ for (var index = 0; index < allImgs.length; index++) {
160
-
161
- {
292
+
162
-
163
- if (modeIn2Rows && i === allImgs.length - 1) {
293
+ if (! modeIn2Rows) {
164
-
294
+
165
- // 2段モードかつ最後の画像
295
+ // 1段モード
166
-
296
+
167
- moveToAndResizeTo(allImgs[i], - widthOfWindow,
297
+ moveTo(allImgs[index], posX);
168
-
169
- widthOfWindow, ratioOfImg * widthOfWindow,
298
+
170
-
299
+
300
+
171
- originalHeightOfImg);
301
+ posX += widthOfImg;
302
+
303
+
304
+
305
+ moveTo(allCurtains[index], posX);
306
+
307
+ resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg);
172
308
 
173
309
  }
174
310
 
175
311
  else {
176
312
 
313
+ // 2段モード
314
+
315
+ if (index === 0) {
316
+
317
+ // 最初の画像
318
+
319
+ // 上段
320
+
321
+ moveTo(allImgs[index], 0 - widthOfLargerImg);
322
+
323
+ // 幅を画面いっぱいにする(縦横比はそのまま)
324
+
325
+ resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
326
+
327
+ // posX += 0;
328
+
329
+ // カーテンなし
330
+
331
+ }
332
+
333
+ else {
334
+
335
+ // 2番目以降の画像
336
+
337
+ // 下段
338
+
177
- moveTo(allImgs[i], pos);
339
+ moveTo(allImgs[index], posX, heightOfLargerImg);
178
-
340
+
341
+
342
+
179
- pos += widthOfImg;
343
+ posX += widthOfImg;
180
-
344
+
345
+
346
+
181
- moveToAndResizeTo(allCurtains[i], pos,
347
+ moveTo(allCurtains[index], posX, heightOfLargerImg);
182
-
348
+
183
- widthOfImg, originalHeightOfImg);
349
+ resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg);
350
+
351
+ }
184
352
 
185
353
  }
186
354
 
187
355
  }
188
356
 
189
- })(- widthOfImg); // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
357
+ })(0 - widthOfImg); // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
358
+
359
+
360
+
361
+
362
+
190
-
363
+ // 画像およびカーテンのアニメーション設定
191
-
192
-
193
-
194
-
364
+
195
- function moveTo(img, targetPos) {
365
+ (function(posX) {
366
+
196
-
367
+ for (var index = 0; index < allImgs.length; index++) {
368
+
369
+ if (! modeIn2Rows) {
370
+
371
+ // 1段モード
372
+
373
+ slideImgIn(allImgs[index], posX);
374
+
375
+
376
+
377
+ posX += widthOfImg;
378
+
379
+
380
+
197
- img.css('left', targetPos);
381
+ openCurtain(allCurtains[index], posX);
198
-
382
+
199
- }
383
+ }
200
-
201
-
202
-
384
+
203
- function moveToAndResizeTo(obj, targetPos, tagetWidth, targetHeight, targetVertPos) {
385
+ else {
204
-
386
+
205
- obj.css('left', targetPos)
387
+ // 2段モード
388
+
206
-
389
+ if (index === 0) {
390
+
391
+ // 最初の画像
392
+
393
+ // 上段
394
+
395
+ slideImgIn(allImgs[index], posX);
396
+
207
- .css('width', tagetWidth)
397
+ // posX += 0;
398
+
208
-
399
+ // カーテンなし
400
+
401
+ }
402
+
403
+ else {
404
+
405
+ // 2番目以降の画像
406
+
407
+ // 下段
408
+
209
- .css('height', targetHeight);
409
+ // setTimeoutのコールバック関数に変化する値を
410
+
210
-
411
+ // 正しくわたすため、forループの実行毎に異なるスコープを作る
211
-
212
-
412
+
213
- if (typeof targetVertPos !== 'undefined') {
413
+ (function(thisImg, thisCurtain, thisPosX) {
414
+
214
-
415
+ setTimeout(function() {
416
+
417
+ // 指定ミリ秒遅れて動作
418
+
419
+ slideImgIn(thisImg, thisPosX);
420
+
421
+
422
+
423
+ thisPosX += widthOfImg;
424
+
425
+
426
+
215
- obj.css('top', targetVertPos);
427
+ openCurtain(thisCurtain, thisPosX);
428
+
429
+ },
430
+
431
+ delayBetweenSlideIn);
432
+
433
+ })
434
+
435
+ (allImgs[index], allCurtains[index], posX);
436
+
437
+
438
+
439
+ posX += widthOfImg;
440
+
441
+ }
442
+
443
+ }
216
444
 
217
445
  }
218
446
 
219
- }
220
-
221
-
222
-
223
- function slideImgIn(img, targetPos) {
224
-
225
- img.animate({
226
-
227
- 'left' : targetPos
228
-
229
- }, animatedDuration,
230
-
231
- // アニメーション完了時に動作する。
232
-
233
- function() {
234
-
235
- // アニメーション中は overflow : hidden になっているので、
236
-
237
- // アニメーション完了後も overflow : hidden にする。
238
-
239
- $(this).css('overflow', 'hidden');
240
-
241
- });
242
-
243
- }
244
-
245
-
246
-
247
- function openCurtain(curtain, targetPos) {
248
-
249
- curtain.animate({
250
-
251
- 'left' : targetPos,
252
-
253
- 'width' : 0 // 最終的に幅が 0 になる。
254
-
255
- }, animatedDuration);
256
-
257
- }
258
-
259
-
260
-
261
-
262
-
263
- // 画像およびカーテンのアニメーション設定
264
-
265
- (function(pos) {
266
-
267
- for (var i = 0; i < allImgs.length; i++)
268
-
269
- {
270
-
271
- if (modeIn2Rows && i === allImgs.length - 1) {
272
-
273
- // 2段モードかつ最後の画像
274
-
275
- slideImgIn(allImgs[i], 0);
447
+ })(0); // 最左の画像の位置は、ブラウザの画面と同じ
448
+
449
+
450
+
451
+
452
+
453
+ // ブラウザの画面幅が変わったときに動作する。
454
+
455
+ $(window).on('resize', function() {
456
+
457
+ calculateSizes();
458
+
459
+
460
+
461
+ // ブラウザの画面幅に合わせて、画像の位置・サイズを再設定する。
462
+
463
+ // カーテンはない
464
+
465
+ (function(posX) {
466
+
467
+ for (var index = 0; index < allImgs.length; index++) {
468
+
469
+ if (! modeIn2Rows) {
470
+
471
+ // 1段モード
472
+
473
+ // 縦位置は 0 に戻す
474
+
475
+ moveTo(allImgs[index], posX, 0);
476
+
477
+ // サイズを元に戻す
478
+
479
+ resizeTo(allImgs[index], allImgSizes[index].width, allImgSizes[index].height);
480
+
481
+
482
+
483
+ posX += widthOfImg;
484
+
485
+ }
486
+
487
+ else {
488
+
489
+ // 2段モード
490
+
491
+ if (index === 0) {
492
+
493
+ // 最初の画像
494
+
495
+ // 移動なし、上段
496
+
497
+ // 幅を画面いっぱいにする(縦横比はそのまま)
498
+
499
+ resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
500
+
501
+ // posX += 0;
502
+
503
+ }
504
+
505
+ else {
506
+
507
+ // 2番目以降の画像
508
+
509
+ // 下段
510
+
511
+ moveTo(allImgs[index], posX, heightOfLargerImg);
512
+
513
+
514
+
515
+ posX += widthOfImg;
516
+
517
+ }
518
+
519
+ }
276
520
 
277
521
  }
278
522
 
279
- else {
280
-
281
- slideImgIn(allImgs[i], pos);
282
-
283
- pos += widthOfImg;
284
-
285
- openCurtain(allCurtains[i], pos);
286
-
287
- }
288
-
289
- }
290
-
291
- })(0); // 最左の画像の位置は、ブラウザの画面と同じ
292
-
293
-
294
-
295
-
296
-
297
- // ブラウザの画面幅が変わったときに動作する。
298
-
299
- $(window).on('resize', function() {
300
-
301
- calculateSizes();
302
-
303
-
304
-
305
- // ブラウザの画面幅に合わせて、画像の位置を再設定する。
306
-
307
- (function(pos) {
308
-
309
- for (var i = 0; i < allImgs.length; i++) {
310
-
311
- if (modeIn2Rows && i === allImgs.length - 1) {
312
-
313
- // 2段モードかつ最後の画像
314
-
315
- moveToAndResizeTo(allImgs[i], 0,
316
-
317
- widthOfWindow, ratioOfImg * widthOfWindow,
318
-
319
- originalHeightOfImg);
320
-
321
- }
322
-
323
- else {
324
-
325
- moveToAndResizeTo(allImgs[i], pos,
326
-
327
- originalWidthOfImg, originalHeightOfImg,
328
-
329
- 0);
330
-
331
- pos += widthOfImg;
332
-
333
- }
334
-
335
- }
336
-
337
523
  })(0); // 最左の画像の位置は、ブラウザの画面と同じ
338
524
 
339
525
  });

3

レスポンシブ対応

2017/02/04 12:17

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -16,6 +16,16 @@
16
16
 
17
17
  コードを少しすっきりさせました。
18
18
 
19
+
20
+
21
+ 修正
22
+
23
+
24
+
25
+ iPhoneを持っていないので、iPhoneチェックサイトでチェックしました。
26
+
27
+ PCでもブラウザ幅を変えると2段になりますよ。
28
+
19
29
  ```HTML
20
30
 
21
31
  <!DOCTYPE html>
@@ -32,6 +42,8 @@
32
42
 
33
43
  body {
34
44
 
45
+ position : relative;
46
+
35
47
  overflow : hidden; /* スクロールバーを表示させない */
36
48
 
37
49
  }
@@ -46,10 +58,6 @@
46
58
 
47
59
  left : 0px;
48
60
 
49
- width : 100%;
50
-
51
- height : 100%;
52
-
53
61
  margin-top : -8px; /* 上に余白を作らない */
54
62
 
55
63
  margin-left : -8px; /* 左に余白を作らない */
@@ -72,8 +80,6 @@
72
80
 
73
81
  position : absolute;
74
82
 
75
- height : 700px;
76
-
77
83
  z-index : 1; /* 画像より手前 */
78
84
 
79
85
  background-color : white;
@@ -98,15 +104,51 @@
98
104
 
99
105
  var allCurtains = [ $('#curtain1'), $('#curtain2'), $('#curtain3') ];
100
106
 
107
+
108
+
109
+ var discontinuousWidth = 1000; // ブラウザの画面幅がこの値より狭くなると2段モード
110
+
111
+ var originalWidthOfImg = 700; // 画像の元の幅
112
+
113
+ var originalHeightOfImg = 400; // 画像の元の高さ
114
+
115
+ var ratioOfImg = originalHeightOfImg / originalWidthOfImg; // 画像の縦・横の比
116
+
117
+
118
+
119
+ var widthOfWindow;
120
+
121
+ var heightOfWindow;
122
+
123
+ var modeIn2Rows; // 2段にするか否か
124
+
101
- var maxWidthOfImg = 700;
125
+ var widthOfImg;
126
+
102
-
127
+ var heightOfImg;
128
+
129
+
130
+
131
+ function calculateSizes() {
132
+
103
- var widthOfWindow = $(window).width();
133
+ widthOfWindow = $(window).width();
134
+
104
-
135
+ heightOfWindow = $(window).height();
136
+
137
+ modeIn2Rows = (widthOfWindow < discontinuousWidth);
138
+
105
- var widthOfImg = widthOfWindow / allImgs.length;
139
+ widthOfImg = widthOfWindow / (modeIn2Rows ? allImgs.length - 1 : allImgs.length);
140
+
106
-
141
+ heightOfImg = ratioOfImg * widthOfImg;
142
+
107
-
143
+ }
144
+
145
+
146
+
108
-
147
+ calculateSizes();
148
+
149
+
150
+
109
-
151
+ // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
110
152
 
111
153
  // ブラウザの画面幅があらかじめわからないので、CSSではなく、
112
154
 
@@ -114,13 +156,33 @@
114
156
 
115
157
  (function(pos) {
116
158
 
117
- for (var i = 0; i < allImgs.length; i++) {
159
+ for (var i = 0; i < allImgs.length; i++)
160
+
118
-
161
+ {
162
+
163
+ if (modeIn2Rows && i === allImgs.length - 1) {
164
+
165
+ // 2段モードかつ最後の画像
166
+
167
+ moveToAndResizeTo(allImgs[i], - widthOfWindow,
168
+
169
+ widthOfWindow, ratioOfImg * widthOfWindow,
170
+
171
+ originalHeightOfImg);
172
+
173
+ }
174
+
175
+ else {
176
+
119
- moveImgTo(allImgs[i], pos);
177
+ moveTo(allImgs[i], pos);
120
-
178
+
121
- pos += widthOfImg;
179
+ pos += widthOfImg;
122
-
180
+
123
- moveCurtainTo(allCurtains[i], pos, widthOfImg);
181
+ moveToAndResizeTo(allCurtains[i], pos,
182
+
183
+ widthOfImg, originalHeightOfImg);
184
+
185
+ }
124
186
 
125
187
  }
126
188
 
@@ -130,7 +192,7 @@
130
192
 
131
193
 
132
194
 
133
- function moveImgTo(img, targetPos) {
195
+ function moveTo(img, targetPos) {
134
196
 
135
197
  img.css('left', targetPos);
136
198
 
@@ -138,11 +200,21 @@
138
200
 
139
201
 
140
202
 
141
- function moveCurtainTo(curtain, targetPos, tagetWidth) {
203
+ function moveToAndResizeTo(obj, targetPos, tagetWidth, targetHeight, targetVertPos) {
142
-
204
+
143
- curtain.css('left', targetPos)
205
+ obj.css('left', targetPos)
144
-
206
+
145
- .css('width', tagetWidth);
207
+ .css('width', tagetWidth)
208
+
209
+ .css('height', targetHeight);
210
+
211
+
212
+
213
+ if (typeof targetVertPos !== 'undefined') {
214
+
215
+ obj.css('top', targetVertPos);
216
+
217
+ }
146
218
 
147
219
  }
148
220
 
@@ -192,13 +264,27 @@
192
264
 
193
265
  (function(pos) {
194
266
 
195
- for (var i = 0; i < allImgs.length; i++) {
267
+ for (var i = 0; i < allImgs.length; i++)
268
+
196
-
269
+ {
270
+
271
+ if (modeIn2Rows && i === allImgs.length - 1) {
272
+
273
+ // 2段モードかつ最後の画像
274
+
275
+ slideImgIn(allImgs[i], 0);
276
+
277
+ }
278
+
279
+ else {
280
+
197
- slideImgIn(allImgs[i], pos);
281
+ slideImgIn(allImgs[i], pos);
198
-
282
+
199
- pos += widthOfImg;
283
+ pos += widthOfImg;
200
-
284
+
201
- openCurtain(allCurtains[i], pos);
285
+ openCurtain(allCurtains[i], pos);
286
+
287
+ }
202
288
 
203
289
  }
204
290
 
@@ -212,9 +298,7 @@
212
298
 
213
299
  $(window).on('resize', function() {
214
300
 
215
- widthOfWindow = $(window).width();
301
+ calculateSizes();
216
-
217
- widthOfImg = widthOfWindow / allImgs.length;
218
302
 
219
303
 
220
304
 
@@ -224,9 +308,29 @@
224
308
 
225
309
  for (var i = 0; i < allImgs.length; i++) {
226
310
 
311
+ if (modeIn2Rows && i === allImgs.length - 1) {
312
+
313
+ // 2段モードかつ最後の画像
314
+
315
+ moveToAndResizeTo(allImgs[i], 0,
316
+
317
+ widthOfWindow, ratioOfImg * widthOfWindow,
318
+
319
+ originalHeightOfImg);
320
+
321
+ }
322
+
323
+ else {
324
+
227
- moveImgTo(allImgs[i], pos);
325
+ moveToAndResizeTo(allImgs[i], pos,
326
+
228
-
327
+ originalWidthOfImg, originalHeightOfImg,
328
+
329
+ 0);
330
+
229
- pos += widthOfImg;
331
+ pos += widthOfImg;
332
+
333
+ }
230
334
 
231
335
  }
232
336
 

2

コードを少しすっきりさせた

2017/01/09 05:50

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -8,6 +8,14 @@
8
8
 
9
9
  画像の幅が同じで、画像の幅 x 3 がブラウザの画面幅より大きい画像を用意して下さい。そうでないと、隙間ができます。
10
10
 
11
+
12
+
13
+ 修正
14
+
15
+
16
+
17
+ コードを少しすっきりさせました。
18
+
11
19
  ```HTML
12
20
 
13
21
  <!DOCTYPE html>
@@ -82,11 +90,19 @@
82
90
 
83
91
  var animatedDuration = 800; // milliseconds
84
92
 
93
+ // スライドインする画像のオブジェクト全て(左から)
94
+
95
+ var allImgs = [ $('#img1'), $('#img2'), $('#img3') ];
96
+
97
+ // 画像を隠すカーテンのオブジェクト全て(左から)
98
+
99
+ var allCurtains = [ $('#curtain1'), $('#curtain2'), $('#curtain3') ];
100
+
101
+ var maxWidthOfImg = 700;
102
+
85
103
  var widthOfWindow = $(window).width();
86
104
 
87
- var widthOfImg = widthOfWindow / 3;
105
+ var widthOfImg = widthOfWindow / allImgs.length;
88
-
89
- var pos;
90
106
 
91
107
 
92
108
 
@@ -96,31 +112,19 @@
96
112
 
97
113
  // JavaScriptで、画像およびカーテンの初期位置・幅を設定する。
98
114
 
99
- pos = - widthOfImg;
115
+ (function(pos) {
116
+
100
-
117
+ for (var i = 0; i < allImgs.length; i++) {
101
-
102
-
118
+
103
- moveImgTo($('#img1'), pos);
119
+ moveImgTo(allImgs[i], pos);
104
-
120
+
105
- pos += widthOfImg;
121
+ pos += widthOfImg;
106
-
122
+
107
- moveCurtainTo($('#curtain1'), pos, widthOfImg);
123
+ moveCurtainTo(allCurtains[i], pos, widthOfImg);
108
-
109
-
110
-
111
- moveImgTo($('#img2'), pos);
124
+
112
-
113
- pos += widthOfImg;
125
+ }
114
-
126
+
115
- moveCurtainTo($('#curtain2'), pos, widthOfImg);
127
+ })(- widthOfImg); // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
116
-
117
-
118
-
119
- moveImgTo($('#img3'), pos);
120
-
121
- pos += widthOfImg;
122
-
123
- moveCurtainTo($('#curtain3'), pos, widthOfImg);
124
128
 
125
129
 
126
130
 
@@ -186,31 +190,19 @@
186
190
 
187
191
  // 画像およびカーテンのアニメーション設定
188
192
 
189
- pos = 0;
193
+ (function(pos) {
194
+
190
-
195
+ for (var i = 0; i < allImgs.length; i++) {
191
-
192
-
196
+
193
- slideImgIn($('#img1'), pos);
197
+ slideImgIn(allImgs[i], pos);
194
-
198
+
195
- pos += widthOfImg;
199
+ pos += widthOfImg;
196
-
200
+
197
- openCurtain($('#curtain1'), pos);
201
+ openCurtain(allCurtains[i], pos);
202
+
198
-
203
+ }
199
-
200
-
204
+
201
- slideImgIn($('#img2'), pos);
205
+ })(0); // 最左の画像の位置は、ブラウザの画面と同じ
202
-
203
- pos += widthOfImg;
204
-
205
- openCurtain($('#curtain2'), pos);
206
-
207
-
208
-
209
- slideImgIn($('#img3'), pos);
210
-
211
- pos += widthOfImg;
212
-
213
- openCurtain($('#curtain3'), pos);
214
206
 
215
207
 
216
208
 
@@ -222,27 +214,23 @@
222
214
 
223
215
  widthOfWindow = $(window).width();
224
216
 
225
- widthOfImg = widthOfWindow / 3;
217
+ widthOfImg = widthOfWindow / allImgs.length;
226
218
 
227
219
 
228
220
 
229
221
  // ブラウザの画面幅に合わせて、画像の位置を再設定する。
230
222
 
231
- pos = 0;
223
+ (function(pos) {
224
+
232
-
225
+ for (var i = 0; i < allImgs.length; i++) {
226
+
233
- // #img1の位置は変化しない。
227
+ moveImgTo(allImgs[i], pos);
234
-
235
-
236
-
228
+
237
- pos += widthOfImg;
229
+ pos += widthOfImg;
230
+
238
-
231
+ }
232
+
239
- moveImgTo($('#img2'), pos);
233
+ })(0); // 最左の画像の位置は、ブラウザの画面と同じ
240
-
241
-
242
-
243
- pos += widthOfImg;
244
-
245
- moveImgTo($('#img3'), pos);
246
234
 
247
235
  });
248
236
 

1

コメントを受けて、コードを修正

2017/01/08 14:38

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -1,5 +1,13 @@
1
1
  画像の幅が左から、400px, 450px, 350pxの場合です。#containerの位置・サイズ、画像のpadding, border, marginを考慮していません。画像のスライドインに伴って、画像を隠しているカーテンが開く実装方法です。
2
2
 
3
+
4
+
5
+ 修正
6
+
7
+
8
+
9
+ 画像の幅が同じで、画像の幅 x 3 がブラウザの画面幅より大きい画像を用意して下さい。そうでないと、隙間ができます。
10
+
3
11
  ```HTML
4
12
 
5
13
  <!DOCTYPE html>
@@ -14,35 +22,49 @@
14
22
 
15
23
  <style>
16
24
 
25
+ body {
26
+
27
+ overflow : hidden; /* スクロールバーを表示させない */
28
+
29
+ }
30
+
31
+
32
+
17
33
  #container {
18
34
 
19
35
  position : relative;
20
36
 
37
+ top : 0px;
38
+
39
+ left : 0px;
40
+
41
+ width : 100%;
42
+
43
+ height : 100%;
44
+
45
+ margin-top : -8px; /* 上に余白を作らない */
46
+
47
+ margin-left : -8px; /* 左に余白を作らない */
48
+
21
- }
49
+ }
22
-
23
-
24
-
50
+
51
+
52
+
25
- #img1 {
53
+ .img {
26
54
 
27
55
  position : absolute;
28
56
 
29
- left : -400px; /* 0px - #img1のwidth */
30
-
31
57
  z-index : 0;
32
58
 
33
59
  }
34
60
 
35
61
 
36
62
 
37
- #curtain1 {
63
+ .curtain {
38
64
 
39
65
  position : absolute;
40
66
 
41
- left : 0px;
67
+ height : 700px;
42
-
43
- width : 400px; /* #img1のwidth */
44
-
45
- height : 600px; /* #img1, #img2のheightより長い */
46
68
 
47
69
  z-index : 1; /* 画像より手前 */
48
70
 
@@ -50,48 +72,6 @@
50
72
 
51
73
  }
52
74
 
53
-
54
-
55
- #img2 {
56
-
57
- position : absolute;
58
-
59
- left : -50px; /* 400px - 450px */
60
-
61
- z-index : 0;
62
-
63
- }
64
-
65
-
66
-
67
- #curtain2 {
68
-
69
- position : absolute;
70
-
71
- left : 400px; /* 0px + #img1のwidth */
72
-
73
- width : 450px; /* #img2のwidth */
74
-
75
- height : 600px; /* #img2, #img3のheightより長い */
76
-
77
- z-index : 1; /* 画像より手前 */
78
-
79
- background-color : white;
80
-
81
- }
82
-
83
-
84
-
85
- #img3 {
86
-
87
- position : absolute;
88
-
89
- left : 500px; /* 400px + 450px - 350px */
90
-
91
- z-index : 0;
92
-
93
- }
94
-
95
75
  </style>
96
76
 
97
77
  <script src="jquery-2.1.4.js"></script>
@@ -102,13 +82,65 @@
102
82
 
103
83
  var animatedDuration = 800; // milliseconds
104
84
 
85
+ var widthOfWindow = $(window).width();
86
+
105
- var widthOfImg1 = 400;
87
+ var widthOfImg = widthOfWindow / 3;
106
-
107
- var widthOfImg2 = 450;
88
+
108
-
109
- var widthOfImg3 = 350;
110
-
111
- var pos = 0;
89
+ var pos;
90
+
91
+
92
+
93
+
94
+
95
+ // ブラウザの画面幅があらかじめわからないので、CSSではなく、
96
+
97
+ // JavaScriptで、画像およびカーテンの初期位置・幅を設定する。
98
+
99
+ pos = - widthOfImg;
100
+
101
+
102
+
103
+ moveImgTo($('#img1'), pos);
104
+
105
+ pos += widthOfImg;
106
+
107
+ moveCurtainTo($('#curtain1'), pos, widthOfImg);
108
+
109
+
110
+
111
+ moveImgTo($('#img2'), pos);
112
+
113
+ pos += widthOfImg;
114
+
115
+ moveCurtainTo($('#curtain2'), pos, widthOfImg);
116
+
117
+
118
+
119
+ moveImgTo($('#img3'), pos);
120
+
121
+ pos += widthOfImg;
122
+
123
+ moveCurtainTo($('#curtain3'), pos, widthOfImg);
124
+
125
+
126
+
127
+
128
+
129
+ function moveImgTo(img, targetPos) {
130
+
131
+ img.css('left', targetPos);
132
+
133
+ }
134
+
135
+
136
+
137
+ function moveCurtainTo(curtain, targetPos, tagetWidth) {
138
+
139
+ curtain.css('left', targetPos)
140
+
141
+ .css('width', tagetWidth);
142
+
143
+ }
112
144
 
113
145
 
114
146
 
@@ -116,7 +148,33 @@
116
148
 
117
149
  img.animate({
118
150
 
119
- 'left': targetPos
151
+ 'left' : targetPos
152
+
153
+ }, animatedDuration,
154
+
155
+ // アニメーション完了時に動作する。
156
+
157
+ function() {
158
+
159
+ // アニメーション中は overflow : hidden になっているので、
160
+
161
+ // アニメーション完了後も overflow : hidden にする。
162
+
163
+ $(this).css('overflow', 'hidden');
164
+
165
+ });
166
+
167
+ }
168
+
169
+
170
+
171
+ function openCurtain(curtain, targetPos) {
172
+
173
+ curtain.animate({
174
+
175
+ 'left' : targetPos,
176
+
177
+ 'width' : 0 // 最終的に幅が 0 になる。
120
178
 
121
179
  }, animatedDuration);
122
180
 
@@ -124,38 +182,70 @@
124
182
 
125
183
 
126
184
 
127
- function openCurtain(curtain, targetPos) {
185
+
128
-
129
- curtain.animate({
186
+
130
-
131
- 'left': targetPos,
187
+ // 画像およびカーテンのアニメーション設定
132
-
188
+
133
- 'width' : 0
189
+ pos = 0;
134
-
135
- }, animatedDuration);
136
-
137
- }
138
190
 
139
191
 
140
192
 
141
193
  slideImgIn($('#img1'), pos);
142
194
 
143
-
144
-
145
- pos += widthOfImg1;
195
+ pos += widthOfImg;
146
-
196
+
147
- openCurtain($('#curtain1'), pos)
197
+ openCurtain($('#curtain1'), pos);
198
+
199
+
148
200
 
149
201
  slideImgIn($('#img2'), pos);
150
202
 
151
-
152
-
153
- pos += widthOfImg2;
203
+ pos += widthOfImg;
154
-
204
+
155
- openCurtain($('#curtain2'), pos)
205
+ openCurtain($('#curtain2'), pos);
206
+
207
+
156
208
 
157
209
  slideImgIn($('#img3'), pos);
158
210
 
211
+ pos += widthOfImg;
212
+
213
+ openCurtain($('#curtain3'), pos);
214
+
215
+
216
+
217
+
218
+
219
+ // ブラウザの画面幅が変わったときに動作する。
220
+
221
+ $(window).on('resize', function() {
222
+
223
+ widthOfWindow = $(window).width();
224
+
225
+ widthOfImg = widthOfWindow / 3;
226
+
227
+
228
+
229
+ // ブラウザの画面幅に合わせて、画像の位置を再設定する。
230
+
231
+ pos = 0;
232
+
233
+ // #img1の位置は変化しない。
234
+
235
+
236
+
237
+ pos += widthOfImg;
238
+
239
+ moveImgTo($('#img2'), pos);
240
+
241
+
242
+
243
+ pos += widthOfImg;
244
+
245
+ moveImgTo($('#img3'), pos);
246
+
247
+ });
248
+
159
249
  });
160
250
 
161
251
  </script>
@@ -166,15 +256,17 @@
166
256
 
167
257
  <div id="container">
168
258
 
169
- <img src="img/second/01.jpg" id="img1">
259
+ <img src="img/second/02.jpg" id="img1" class="img">
170
-
260
+
171
- <div id="curtain1"></div>
261
+ <div id="curtain1" class="curtain"></div>
172
-
173
- <img src="img/first/01.jpg" id="img2">
262
+
174
-
175
- <div id="curtain2"></div>
176
-
177
- <img src="img/third/03.jpg" id="img3">
263
+ <img src="img/second/03.jpg" id="img2" class="img">
264
+
265
+ <div id="curtain2" class="curtain"></div>
266
+
267
+ <img src="img/second/04.jpg" id="img3" class="img">
268
+
269
+ <div id="curtain3" class="curtain"></div>
178
270
 
179
271
  </div>
180
272