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

編集履歴

回答編集履歴

13

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

2017/02/19 06:32

投稿

naomi3
naomi3

スコア1105

answer CHANGED
File without changes

12

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

2017/02/19 06:18

投稿

naomi3
naomi3

スコア1105

answer CHANGED
File without changes

11

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

2017/02/19 06:16

投稿

naomi3
naomi3

スコア1105

answer CHANGED
File without changes

10

2017/02/19 06:10

投稿

naomi3
naomi3

スコア1105

answer CHANGED
File without changes

9

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

2017/02/16 06:20

投稿

naomi3
naomi3

スコア1105

answer CHANGED
@@ -33,6 +33,11 @@
33
33
  修正
34
34
 
35
35
  文字を上下左右中央に来るようにしました。
36
+
37
+ 修正
38
+
39
+ すみません。z-indexではなかったですね。
40
+ メニューがちゃんと出るようにしました。
36
41
  ```HTML
37
42
  <!DOCTYPE html>
38
43
  <html>
@@ -76,7 +81,26 @@
76
81
  color : white;
77
82
  font-size : x-large;
78
83
  text-align : center;
84
+ vertical-align : middle;
79
85
  }
86
+
87
+ #menu {
88
+ position : relative;
89
+ overflow : hidden;
90
+ margin-left : -4px;
91
+ margin-right : -4px;
92
+ }
93
+
94
+ .menuItem {
95
+ position : relative;
96
+ float : left;
97
+ text-align : center;
98
+ }
99
+
100
+ #menuItem1, #menuItem3 {
101
+ border-left : solid 1px;
102
+ border-right : solid 1px;
103
+ }
80
104
  </style>
81
105
  <script src="jquery-2.1.4.js"></script>
82
106
  <script>
@@ -98,7 +122,7 @@
98
122
  // 画像を隠すカーテンのオブジェクト全て(左から)
99
123
  var allCurtains = [ $('#curtain1'), $('#curtain2'), $('#curtain3') ];
100
124
  // ブラウザの画面幅がこの値より狭くなると2段モード
101
- var discontinuousWidth = 1000;
125
+ var discontinuousWidth = 1000; // px
102
126
  // 2段にするか否か
103
127
  var modeIn2Rows;
104
128
  // 画像の実際の幅
@@ -109,6 +133,12 @@
109
133
  var heightOfLargerImg;
110
134
  // アニメーションが開始されたか否か
111
135
  var startedAnimation = false;
136
+ // 画像とメニューの隙間
137
+ var gapBetweenImgAndMenu = 10; // px
138
+ // 1メニュー項目の幅
139
+ var widthOfMenuItem;
140
+ // メニューのボーダー
141
+ var borderOfMenu = 1; // px
112
142
 
113
143
 
114
144
  // Safariの場合、ここでは早すぎて、画像のサイズを取得できない
@@ -121,53 +151,67 @@
121
151
  });
122
152
 
123
153
 
124
- function initializeAndStartAnimation() {
154
+ function placeObjects(posX, posXOfLargerImg, withCurtains) {
125
- if (startedAnimation || ! calculateSizes()) {
155
+ var maxHeightOfImg = 0;
126
- return;
127
- }
128
- // アニメーションが開始されていず、サイズを計算できたときに続行
129
156
 
130
- // ブラウザの画面幅があらかじめわからないので、CSSではなく、
131
- // JavaScriptで、画像およびカーテンの初期位置・サイズを設定する。
132
- (function(posX) {
133
- for (var index = 0; index < allImgs.length; index++) {
157
+ for (var index = 0; index < allImgs.length; index++) {
134
- if (! modeIn2Rows || index !== 0) {
158
+ if (! modeIn2Rows || index !== 0) {
135
- // 1段モード または 2段モード2番目以降の画像(下段)
159
+ // 1段モード または 2段モード2番目以降の画像(下段)
160
+ // 1段モードのとき、縦位置は 0 に戻す
136
- var posY = (modeIn2Rows ? heightOfLargerImg : undefined);
161
+ var posY = (modeIn2Rows ? heightOfLargerImg : 0);
137
- var heightOfImg = allImgSizes[index].ratio * widthOfImg;
162
+ var heightOfImg = allImgSizes[index].ratio * widthOfImg;
138
163
 
139
- moveTo(allImgs[index].parent(), posX, posY);
164
+ maxHeightOfImg = Math.max(maxHeightOfImg, heightOfImg);
140
165
 
141
- resizeTo(allImgs[index], widthOfImg, heightOfImg);
166
+ moveTo(allImgs[index].parent(), posX, posY);
142
167
 
143
- // コンテナからの相対座標
144
- moveTo(allTexts[index],
145
- (widthOfImg - allTextSizes[index].width) / 2,
146
- (heightOfImg - allTextSizes[index].height) / 2);
168
+ resizeTo(allImgs[index], widthOfImg, heightOfImg);
147
169
 
170
+ // コンテナからの相対座標
148
- posX += widthOfImg;
171
+ moveTo(allTexts[index],
172
+ (widthOfImg - allTextSizes[index].width) / 2,
173
+ (heightOfImg - allTextSizes[index].height) / 2);
149
174
 
175
+ posX += widthOfImg;
176
+
177
+ if (withCurtains) {
150
178
  moveTo(allCurtains[index], posX, posY);
151
179
  resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg);
152
180
  }
181
+ }
153
- else {
182
+ else {
154
- // 2段モード かつ 最初の画像(上段)
183
+ // 2段モード かつ 最初の画像(上段)
155
- moveTo(allImgs[index].parent(), 0 - widthOfLargerImg);
184
+ moveTo(allImgs[index].parent(), posXOfLargerImg);
156
185
 
157
- // 幅を画面いっぱいにする(縦横比はそのまま)
186
+ // 幅を画面いっぱいにする(縦横比はそのまま)
158
- resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
187
+ resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
159
188
 
160
- // コンテナからの相対座標
189
+ // コンテナからの相対座標
161
- moveTo(allTexts[index],
190
+ moveTo(allTexts[index],
162
- (widthOfLargerImg - allTextSizes[index].width) / 2,
191
+ (widthOfLargerImg - allTextSizes[index].width) / 2,
163
- (heightOfLargerImg - allTextSizes[index].height) / 2);
192
+ (heightOfLargerImg - allTextSizes[index].height) / 2);
164
- // posX += 0;
193
+ // posX += 0;
165
- // カーテンなし
194
+ // カーテンなし
166
- }
167
195
  }
168
- })(0 - widthOfImg); // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
196
+ }
169
197
 
198
+ moveTo($('#menu'), undefined,
199
+ (modeIn2Rows ? heightOfLargerImg : 0) + maxHeightOfImg + gapBetweenImgAndMenu);
200
+ resizeTo($('.menuItem'), widthOfMenuItem)
201
+ }
170
202
 
203
+
204
+ function initializeAndStartAnimation() {
205
+ if (startedAnimation || ! calculateSizes()) {
206
+ return;
207
+ }
208
+ // アニメーションが開始されていず、サイズを計算できたときに続行
209
+
210
+ // ブラウザの画面幅があらかじめわからないので、CSSではなく、
211
+ // JavaScriptで、画像、カーテン、テキスト、メニューの初期位置・サイズを設定する。
212
+ // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
213
+ placeObjects(0 - widthOfImg, 0 - widthOfLargerImg, true);
214
+
171
215
  // 画像およびカーテンのアニメーション設定
172
216
  (function(posX) {
173
217
  for (var index = 0; index < allImgs.length; index++) {
@@ -222,8 +266,8 @@
222
266
  function calculateSizes() {
223
267
  var calculated = true;
224
268
 
225
- // 画像のもとのサイズ、高さの最大値を取得
269
+ // 画像のもとのサイズを取得
226
- if (allImgSizes.length < allImgs.length || maxHeightOfImg == 0) {
270
+ if (allImgSizes.length < allImgs.length) {
227
271
  // まだ取得できていないときのみ、取得する
228
272
  $.each(allImgs, function(index, currentImg) {
229
273
  var width = currentImg.width();
@@ -237,8 +281,6 @@
237
281
 
238
282
  var ratio = height / width; // 画像の縦横比
239
283
  allImgSizes[index] = { 'width' : width, 'height' : height, 'ratio' : ratio };
240
-
241
- maxHeightOfImg = Math.max(maxHeightOfImg, height);
242
284
  });
243
285
 
244
286
  if (! calculated) {
@@ -261,15 +303,22 @@
261
303
  widthOfImg = widthOfWindow / (modeIn2Rows ? allImgs.length - 1 : allImgs.length);
262
304
  widthOfLargerImg = widthOfWindow;
263
305
  heightOfLargerImg = allImgSizes[0].ratio * widthOfLargerImg;
306
+ var marginOfMenu = ($('#menu').css('margin-left').replace(/px$/, '') - 0) +
307
+ ($('#menu').css('margin-right').replace(/px$/, '') - 0);
308
+ widthOfMenuItem = - 4 +
309
+ (widthOfWindow - borderOfMenu * (allImgs.length + 1) + marginOfMenu) / allImgs.length;
264
310
 
265
311
  return true;
266
312
  }
267
313
 
268
314
 
269
- // 画像、カーテンの位置を変更する
315
+ // 画像、カーテン、テキスト、メニューの位置を変更する
270
316
  // 画像の場合はそのコンテナ
271
317
  function moveTo(obj, targetPosX, targetPosY) {
318
+ if (typeof targetPosX !== 'undefined') {
319
+ // targetPosX が指定されているときのみ変更する
272
- obj.css('left', targetPosX);
320
+ obj.css('left', targetPosX);
321
+ }
273
322
 
274
323
  if (typeof targetPosY !== 'undefined') {
275
324
  // targetPosY が指定されているときのみ変更する
@@ -277,10 +326,17 @@
277
326
  }
278
327
  }
279
328
 
280
- // 画像、カーテンのサイズを変更する
329
+ // 画像、カーテン、メニュー項目のサイズを変更する
281
330
  function resizeTo(obj, targetWidth, targetHeight) {
331
+ if (typeof targetWidth !== 'undefined') {
332
+ // targetWidth が指定されているときのみ変更する
282
- obj.css('width', targetWidth)
333
+ obj.css('width', targetWidth)
334
+ }
335
+
336
+ if (typeof targetHeight !== 'undefined') {
337
+ // targetHeight が指定されているときのみ変更する
283
- .css('height', targetHeight);
338
+ obj.css('height', targetHeight);
339
+ }
284
340
  }
285
341
 
286
342
  // 画像をのせたコンテナをアニメーションでスライドインする
@@ -306,39 +362,8 @@
306
362
 
307
363
  // ブラウザの画面幅に合わせて、画像の位置・サイズを再設定する。
308
364
  // カーテンはない
309
- (function(posX) {
310
- for (var index = 0; index < allImgs.length; index++) {
311
- if (! modeIn2Rows || index !== 0) {
312
- // 1段モード または 2段モード2番目以降の画像(下段)
313
- // 1段モードのとき、縦位置は 0 に戻す
314
- var posY = (modeIn2Rows ? heightOfLargerImg : 0);
315
- var heightOfImg = allImgSizes[index].ratio * widthOfImg;
316
-
317
- moveTo(allImgs[index].parent(), posX, posY);
318
-
319
- resizeTo(allImgs[index], widthOfImg, heightOfImg);
320
-
321
- // コンテナからの相対座標
322
- moveTo(allTexts[index],
323
- (widthOfImg - allTextSizes[index].width) / 2,
324
- (heightOfImg - allTextSizes[index].height) / 2);
325
-
326
- posX += widthOfImg;
327
- }
328
- else {
329
- // 2段モード かつ 最初の画像(上段)
330
- // 移動なし
331
- // 幅を画面いっぱいにする(縦横比はそのまま)
332
- resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
333
-
334
- // コンテナからの相対座標
335
- moveTo(allTexts[index],
336
- (widthOfLargerImg - allTextSizes[index].width) / 2,
337
- (heightOfLargerImg - allTextSizes[index].height) / 2);
338
- // posX += 0;
339
- }
340
- }
341
- })(0); // 最左の画像の位置は、ブラウザの画面と同じ
365
+ // 最左の画像の位置は、ブラウザの画面と同じ
366
+ placeObjects(0, 0, false);
342
367
  });
343
368
  });
344
369
  </script>
@@ -366,6 +391,11 @@
366
391
 
367
392
  <div id="curtain3" class="curtain"></div>
368
393
  </div>
394
+ <div id="menu">
395
+ <div class="menuItem" id="menuItem1">メニュー1</div>
396
+ <div class="menuItem" id="menuItem2">メニュー2</div>
397
+ <div class="menuItem" id="menuItem3">メニュー3</div>
398
+ </div>
369
399
  </body>
370
400
  </html>
371
401
  ```

8

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

2017/02/16 06:20

投稿

naomi3
naomi3

スコア1105

answer CHANGED
@@ -29,6 +29,10 @@
29
29
 
30
30
  IE, Firefox, Chrome, Safariで動きます。
31
31
  Safariでは画像のサイズ取得のタイミングが違っていました。
32
+
33
+ 修正
34
+
35
+ 文字を上下左右中央に来るようにしました。
32
36
  ```HTML
33
37
  <!DOCTYPE html>
34
38
  <html>
@@ -103,11 +107,10 @@
103
107
  var widthOfLargerImg;
104
108
  // 大きい方の画像の実際の高さ
105
109
  var heightOfLargerImg;
106
- // 画像にのせるテキストの下マージン(画像相対)
107
- var marginBottomBetweenTextAndImg = 20;
108
110
  // アニメーションが開始されたか否か
109
111
  var startedAnimation = false;
110
112
 
113
+
111
114
  // Safariの場合、ここでは早すぎて、画像のサイズを取得できない
112
115
  initializeAndStartAnimation();
113
116
 
@@ -139,8 +142,8 @@
139
142
 
140
143
  // コンテナからの相対座標
141
144
  moveTo(allTexts[index],
142
- (widthOfImg - allTextSizes[index].width) / 2,
145
+ (widthOfImg - allTextSizes[index].width) / 2,
143
- heightOfImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
146
+ (heightOfImg - allTextSizes[index].height) / 2);
144
147
 
145
148
  posX += widthOfImg;
146
149
 
@@ -156,8 +159,8 @@
156
159
 
157
160
  // コンテナからの相対座標
158
161
  moveTo(allTexts[index],
159
- (widthOfLargerImg - allTextSizes[index].width) / 2,
162
+ (widthOfLargerImg - allTextSizes[index].width) / 2,
160
- heightOfLargerImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
163
+ (heightOfLargerImg - allTextSizes[index].height) / 2);
161
164
  // posX += 0;
162
165
  // カーテンなし
163
166
  }
@@ -220,7 +223,7 @@
220
223
  var calculated = true;
221
224
 
222
225
  // 画像のもとのサイズ、高さの最大値を取得
223
- if (allImgSizes.length < allImgs.length) {
226
+ if (allImgSizes.length < allImgs.length || maxHeightOfImg == 0) {
224
227
  // まだ取得できていないときのみ、取得する
225
228
  $.each(allImgs, function(index, currentImg) {
226
229
  var width = currentImg.width();
@@ -274,7 +277,6 @@
274
277
  }
275
278
  }
276
279
 
277
-
278
280
  // 画像、カーテンのサイズを変更する
279
281
  function resizeTo(obj, targetWidth, targetHeight) {
280
282
  obj.css('width', targetWidth)
@@ -288,7 +290,6 @@
288
290
  }, durationOfAnimation);
289
291
  }
290
292
 
291
-
292
293
  // カーテンをアニメーションで開ける
293
294
  function openCurtain(curtain, targetPosX) {
294
295
  curtain.animate({
@@ -309,7 +310,7 @@
309
310
  for (var index = 0; index < allImgs.length; index++) {
310
311
  if (! modeIn2Rows || index !== 0) {
311
312
  // 1段モード または 2段モード2番目以降の画像(下段)
312
- // 縦位置は 0 に戻す
313
+ // 1段モードのとき、縦位置は 0 に戻す
313
314
  var posY = (modeIn2Rows ? heightOfLargerImg : 0);
314
315
  var heightOfImg = allImgSizes[index].ratio * widthOfImg;
315
316
 
@@ -319,8 +320,8 @@
319
320
 
320
321
  // コンテナからの相対座標
321
322
  moveTo(allTexts[index],
322
- (widthOfImg - allTextSizes[index].width) / 2,
323
+ (widthOfImg - allTextSizes[index].width) / 2,
323
- heightOfImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
324
+ (heightOfImg - allTextSizes[index].height) / 2);
324
325
 
325
326
  posX += widthOfImg;
326
327
  }
@@ -332,8 +333,8 @@
332
333
 
333
334
  // コンテナからの相対座標
334
335
  moveTo(allTexts[index],
335
- (widthOfLargerImg - allTextSizes[index].width) / 2,
336
+ (widthOfLargerImg - allTextSizes[index].width) / 2,
336
- heightOfLargerImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
337
+ (heightOfLargerImg - allTextSizes[index].height) / 2);
337
338
  // posX += 0;
338
339
  }
339
340
  }
@@ -360,7 +361,7 @@
360
361
 
361
362
  <div id="imgWrapper3" class="imgWrapper">
362
363
  <img src="img/second/04.jpg" id="img3" class="img">
363
- <div class="textOverImg" id="text3">3枚目 - 777</div>
364
+ <div class="textOverImg" id="text3">3枚目 - 777<br>2行目</div>
364
365
  </div>
365
366
 
366
367
  <div id="curtain3" class="curtain"></div>

7

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

2017/02/12 12:46

投稿

naomi3
naomi3

スコア1105

answer CHANGED
@@ -24,6 +24,11 @@
24
24
  修正
25
25
 
26
26
  IE, Firefox, Chromeで動きます。Safariは画像・文字の上下設定がうまくいきませんね。
27
+
28
+ 修正
29
+
30
+ IE, Firefox, Chrome, Safariで動きます。
31
+ Safariでは画像のサイズ取得のタイミングが違っていました。
27
32
  ```HTML
28
33
  <!DOCTYPE html>
29
34
  <html>
@@ -100,37 +105,161 @@
100
105
  var heightOfLargerImg;
101
106
  // 画像にのせるテキストの下マージン(画像相対)
102
107
  var marginBottomBetweenTextAndImg = 20;
108
+ // アニメーションが開始されたか否か
109
+ var startedAnimation = false;
103
110
 
111
+ // Safariの場合、ここでは早すぎて、画像のサイズを取得できない
112
+ initializeAndStartAnimation();
104
113
 
105
- // 画像のもとのサイズ、高さの最大値を算出
114
+ // 画像の読み込みが完了後に動作。
106
- allImgs.forEach(function(currentImg, index) {
115
+ $(window).on('load', function() {
116
+ // IEの場合、ここでは、アニメーションが正しく動作しない
107
- var width = currentImg.width();
117
+ initializeAndStartAnimation();
108
- var height = currentImg.height();
109
- var ratio = height / width; // 画像の縦横比
110
- allImgSizes[index] = { 'width' : width, 'height' : height, 'ratio' : ratio };
111
-
112
- maxHeightOfImg = Math.max(maxHeightOfImg, height);
113
118
  });
114
119
 
115
120
 
121
+ function initializeAndStartAnimation() {
122
+ if (startedAnimation || ! calculateSizes()) {
123
+ return;
124
+ }
116
- // テキストのサイズを算出
125
+ // アニメーションが開始されていず、サイズを計算できたときに続行
117
- allTexts.forEach(function(currentImg, index) {
118
- var width = currentImg.width();
119
- var height = currentImg.height();
120
- allTextSizes[index] = { 'width' : width, 'height' : height };
121
- });
122
126
 
127
+ // ブラウザの画面幅があらかじめわからないので、CSSではなく、
128
+ // JavaScriptで、画像およびカーテンの初期位置・サイズを設定する。
129
+ (function(posX) {
130
+ for (var index = 0; index < allImgs.length; index++) {
131
+ if (! modeIn2Rows || index !== 0) {
132
+ // 1段モード または 2段モード2番目以降の画像(下段)
133
+ var posY = (modeIn2Rows ? heightOfLargerImg : undefined);
134
+ var heightOfImg = allImgSizes[index].ratio * widthOfImg;
123
135
 
124
- calculateSizes();
136
+ moveTo(allImgs[index].parent(), posX, posY);
125
137
 
138
+ resizeTo(allImgs[index], widthOfImg, heightOfImg);
126
139
 
140
+ // コンテナからの相対座標
141
+ moveTo(allTexts[index],
142
+ (widthOfImg - allTextSizes[index].width) / 2,
143
+ heightOfImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
144
+
145
+ posX += widthOfImg;
146
+
147
+ moveTo(allCurtains[index], posX, posY);
148
+ resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg);
149
+ }
150
+ else {
151
+ // 2段モード かつ 最初の画像(上段)
152
+ moveTo(allImgs[index].parent(), 0 - widthOfLargerImg);
153
+
154
+ // 幅を画面いっぱいにする(縦横比はそのまま)
155
+ resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
156
+
157
+ // コンテナからの相対座標
158
+ moveTo(allTexts[index],
159
+ (widthOfLargerImg - allTextSizes[index].width) / 2,
160
+ heightOfLargerImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
161
+ // posX += 0;
162
+ // カーテンなし
163
+ }
164
+ }
165
+ })(0 - widthOfImg); // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
166
+
167
+
168
+ // 画像およびカーテンのアニメーション設定
169
+ (function(posX) {
170
+ for (var index = 0; index < allImgs.length; index++) {
171
+ if (! modeIn2Rows) {
172
+ // 1段モード
173
+ slideImgIn(allImgs[index].parent(), posX);
174
+
175
+ posX += widthOfImg;
176
+
177
+ openCurtain(allCurtains[index], posX);
178
+ }
179
+ else {
180
+ // 2段モード
181
+ if (index === 0) {
182
+ // 最初の画像
183
+ // 上段
184
+ slideImgIn(allImgs[index].parent(), posX);
185
+ // posX += 0;
186
+ // カーテンなし
187
+ }
188
+ else {
189
+ // 2番目以降の画像
190
+ // 下段
191
+ // setTimeoutのコールバック関数に変化する値を
192
+ // 正しくわたすため、forループの実行毎に異なるスコープを作る
193
+ (function(thisImg, thisCurtain, thisPosX) {
194
+ setTimeout(function() {
195
+ // 指定ミリ秒遅れて動作
196
+ slideImgIn(thisImg.parent(), thisPosX);
197
+
198
+ thisPosX += widthOfImg;
199
+
200
+ openCurtain(thisCurtain, thisPosX);
201
+ },
202
+ delayBetweenSlideIn);
203
+ })
204
+ (allImgs[index], allCurtains[index], posX);
205
+
206
+ posX += widthOfImg;
207
+ }
208
+ }
209
+ }
210
+ })(0); // 最左の画像の位置は、ブラウザの画面と同じ
211
+
212
+ startedAnimation = true;
213
+ }
214
+
215
+
127
- // ブラウザの画面幅に応じてサイズを(再)計算する
216
+ /** ブラウザの画面幅に応じてサイズを(再)計算する
217
+ * @return true:正しく計算できた／false:正しく計算できなかった
218
+ */
128
219
  function calculateSizes() {
220
+ var calculated = true;
221
+
222
+ // 画像のもとのサイズ、高さの最大値を取得
223
+ if (allImgSizes.length < allImgs.length) {
224
+ // まだ取得できていないときのみ、取得する
225
+ $.each(allImgs, function(index, currentImg) {
226
+ var width = currentImg.width();
227
+ var height = currentImg.height();
228
+
229
+ if (width == 0 || height == 0) {
230
+ // Safariで画像がまだロードされていない場合
231
+ calculated = false;
232
+ return;
233
+ }
234
+
235
+ var ratio = height / width; // 画像の縦横比
236
+ allImgSizes[index] = { 'width' : width, 'height' : height, 'ratio' : ratio };
237
+
238
+ maxHeightOfImg = Math.max(maxHeightOfImg, height);
239
+ });
240
+
241
+ if (! calculated) {
242
+ return false;
243
+ }
244
+ }
245
+
246
+ // テキストのサイズを取得
247
+ if (allTextSizes.length < allTexts.length) {
248
+ // まだ取得できていないときのみ、取得する
249
+ $.each(allTexts, function(index, currentText) {
250
+ var width = currentText.width();
251
+ var height = currentText.height();
252
+ allTextSizes[index] = { 'width' : width, 'height' : height };
253
+ });
254
+ }
255
+
129
256
  var widthOfWindow = $(window).width();
130
257
  modeIn2Rows = (widthOfWindow < discontinuousWidth);
131
258
  widthOfImg = widthOfWindow / (modeIn2Rows ? allImgs.length - 1 : allImgs.length);
132
259
  widthOfLargerImg = widthOfWindow;
133
260
  heightOfLargerImg = allImgSizes[0].ratio * widthOfLargerImg;
261
+
262
+ return true;
134
263
  }
135
264
 
136
265
 
@@ -152,7 +281,6 @@
152
281
  .css('height', targetHeight);
153
282
  }
154
283
 
155
-
156
284
  // 画像をのせたコンテナをアニメーションでスライドインする
157
285
  function slideImgIn(imgWrapper, targetPosX) {
158
286
  imgWrapper.animate({
@@ -171,92 +299,6 @@
171
299
  }
172
300
 
173
301
 
174
- // ブラウザの画面幅があらかじめわからないので、CSSではなく、
175
- // JavaScriptで、画像およびカーテンの初期位置・サイズを設定する。
176
- (function(posX) {
177
- for (var index = 0; index < allImgs.length; index++) {
178
- if (! modeIn2Rows || index !== 0) {
179
- // 1段モード または 2段モード2番目以降の画像(下段)
180
- var posY = (modeIn2Rows ? heightOfLargerImg : undefined);
181
- var heightOfImg = allImgSizes[index].ratio * widthOfImg;
182
-
183
- moveTo(allImgs[index].parent(), posX, posY);
184
-
185
- resizeTo(allImgs[index], widthOfImg, heightOfImg);
186
-
187
- // コンテナから相対座標
188
- moveTo(allTexts[index],
189
- (widthOfImg - allTextSizes[index].width) / 2,
190
- heightOfImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
191
-
192
- posX += widthOfImg;
193
-
194
- moveTo(allCurtains[index], posX, posY);
195
- resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg);
196
- }
197
- else {
198
- // 2段モード かつ 最初の画像(上段)
199
- moveTo(allImgs[index].parent(), 0 - widthOfLargerImg);
200
-
201
- // 幅を画面いっぱいにする(縦横比はそのまま)
202
- resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
203
-
204
- // コンテナから相対座標
205
- moveTo(allTexts[index],
206
- (widthOfLargerImg - allTextSizes[index].width) / 2,
207
- heightOfLargerImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
208
- // posX += 0;
209
- // カーテンなし
210
- }
211
- }
212
- })(0 - widthOfImg); // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
213
-
214
-
215
- // 画像およびカーテンのアニメーション設定
216
- (function(posX) {
217
- for (var index = 0; index < allImgs.length; index++) {
218
- if (! modeIn2Rows) {
219
- // 1段モード
220
- slideImgIn(allImgs[index].parent(), posX);
221
-
222
- posX += widthOfImg;
223
-
224
- openCurtain(allCurtains[index], posX);
225
- }
226
- else {
227
- // 2段モード
228
- if (index === 0) {
229
- // 最初の画像
230
- // 上段
231
- slideImgIn(allImgs[index].parent(), posX);
232
- // posX += 0;
233
- // カーテンなし
234
- }
235
- else {
236
- // 2番目以降の画像
237
- // 下段
238
- // setTimeoutのコールバック関数に変化する値を
239
- // 正しくわたすため、forループの実行毎に異なるスコープを作る
240
- (function(thisImg, thisCurtain, thisPosX) {
241
- setTimeout(function() {
242
- // 指定ミリ秒遅れて動作
243
- slideImgIn(thisImg.parent(), thisPosX);
244
-
245
- thisPosX += widthOfImg;
246
-
247
- openCurtain(thisCurtain, thisPosX);
248
- },
249
- delayBetweenSlideIn);
250
- })
251
- (allImgs[index], allCurtains[index], posX);
252
-
253
- posX += widthOfImg;
254
- }
255
- }
256
- }
257
- })(0); // 最左の画像の位置は、ブラウザの画面と同じ
258
-
259
-
260
302
  // ブラウザの画面幅が変わったときに動作する。
261
303
  $(window).on('resize', function() {
262
304
  calculateSizes();
@@ -275,7 +317,7 @@
275
317
 
276
318
  resizeTo(allImgs[index], widthOfImg, heightOfImg);
277
319
 
278
- // コンテナから相対座標
320
+ // コンテナからの相対座標
279
321
  moveTo(allTexts[index],
280
322
  (widthOfImg - allTextSizes[index].width) / 2,
281
323
  heightOfImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
@@ -288,7 +330,7 @@
288
330
  // 幅を画面いっぱいにする(縦横比はそのまま)
289
331
  resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
290
332
 
291
- // コンテナから相対座標
333
+ // コンテナからの相対座標
292
334
  moveTo(allTexts[index],
293
335
  (widthOfLargerImg - allTextSizes[index].width) / 2,
294
336
  heightOfLargerImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);

6

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

2017/02/11 13:29

投稿

naomi3
naomi3

スコア1105

answer CHANGED
@@ -20,6 +20,10 @@
20
20
  修正
21
21
 
22
22
  画像にテキストをのせ、画像を伸縮するにはこうです。
23
+
24
+ 修正
25
+
26
+ IE, Firefox, Chromeで動きます。Safariは画像・文字の上下設定がうまくいきませんね。
23
27
  ```HTML
24
28
  <!DOCTYPE html>
25
29
  <html>
@@ -43,7 +47,6 @@
43
47
  .imgWrapper /* 1枚の画像およびテキストをのせたdivコンテナ */ {
44
48
  position : absolute;
45
49
  z-index : 0;
46
- text-align : center;
47
50
  }
48
51
 
49
52
  .curtain {
@@ -52,11 +55,18 @@
52
55
  background-color : white;
53
56
  }
54
57
 
55
- .textOnImg /* 画像にのせるテキスト */ {
58
+ .img {
56
59
  position : absolute;
60
+ z-index : 0;
61
+ }
62
+
63
+ .textOverImg /* 画像にのせるテキスト */ {
64
+ position : absolute;
57
- bottom :50px;
65
+ width : 180px;
66
+ height : 30px;
58
67
  color : white;
59
- font-size : xx-large;
68
+ font-size : x-large;
69
+ text-align : center;
60
70
  }
61
71
  </style>
62
72
  <script src="jquery-2.1.4.js"></script>
@@ -70,6 +80,10 @@
70
80
  var allImgs = [ $('#img1'), $('#img2'), $('#img3') ];
71
81
  // 画像のもとのサイズ(幅、高さ、縦横比)全て(左から)
72
82
  var allImgSizes = [];
83
+ // 画像にのせるテキストのdivコンテナ全て(左から)
84
+ var allTexts = [ $('#text1'), $('#text2'), $('#text3') ];
85
+ // 画像にのせるテキストのサイズ(幅、高さ)全て(左から)
86
+ var allTextSizes = [];
73
87
  // 画像のもとの高さの最大値
74
88
  var maxHeightOfImg = 0;
75
89
  // 画像を隠すカーテンのオブジェクト全て(左から)
@@ -84,6 +98,8 @@
84
98
  var widthOfLargerImg;
85
99
  // 大きい方の画像の実際の高さ
86
100
  var heightOfLargerImg;
101
+ // 画像にのせるテキストの下マージン(画像相対)
102
+ var marginBottomBetweenTextAndImg = 20;
87
103
 
88
104
 
89
105
  // 画像のもとのサイズ、高さの最大値を算出
@@ -97,6 +113,14 @@
97
113
  });
98
114
 
99
115
 
116
+ // テキストのサイズを算出
117
+ allTexts.forEach(function(currentImg, index) {
118
+ var width = currentImg.width();
119
+ var height = currentImg.height();
120
+ allTextSizes[index] = { 'width' : width, 'height' : height };
121
+ });
122
+
123
+
100
124
  calculateSizes();
101
125
 
102
126
 
@@ -133,13 +157,7 @@
133
157
  function slideImgIn(imgWrapper, targetPosX) {
134
158
  imgWrapper.animate({
135
159
  'left' : targetPosX
136
- }, durationOfAnimation,
160
+ }, durationOfAnimation);
137
- // アニメーション完了時に動作する
138
- function() {
139
- // アニメーション中は overflow : hidden になっているので、
140
- // アニメーション完了後も overflow : hidden にする。
141
- $(this).css('overflow', 'hidden');
142
- });
143
161
  }
144
162
 
145
163
 
@@ -157,40 +175,38 @@
157
175
  // JavaScriptで、画像およびカーテンの初期位置・サイズを設定する。
158
176
  (function(posX) {
159
177
  for (var index = 0; index < allImgs.length; index++) {
160
- if (! modeIn2Rows) {
178
+ if (! modeIn2Rows || index !== 0) {
161
- // 1段モード
179
+ // 1段モード または 2段モード2番目以降の画像(下段)
162
- moveTo(allImgs[index].parent(), posX);
180
+ var posY = (modeIn2Rows ? heightOfLargerImg : undefined);
163
181
  var heightOfImg = allImgSizes[index].ratio * widthOfImg;
182
+
183
+ moveTo(allImgs[index].parent(), posX, posY);
184
+
164
185
  resizeTo(allImgs[index], widthOfImg, heightOfImg);
165
186
 
187
+ // コンテナから相対座標
188
+ moveTo(allTexts[index],
189
+ (widthOfImg - allTextSizes[index].width) / 2,
190
+ heightOfImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
191
+
166
192
  posX += widthOfImg;
167
193
 
168
- moveTo(allCurtains[index], posX);
194
+ moveTo(allCurtains[index], posX, posY);
169
195
  resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg);
170
196
  }
171
197
  else {
172
- // 2段モード
198
+ // 2段モード かつ 最初の画像(上段)
173
- if (index === 0) {
174
- // 最初の画像
175
- // 上段
176
- moveTo(allImgs[index].parent(), 0 - widthOfLargerImg);
199
+ moveTo(allImgs[index].parent(), 0 - widthOfLargerImg);
177
- // 幅を画面いっぱいにする(縦横比はそのまま)
178
- resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
179
- // posX += 0;
180
- // カーテンなし
181
- }
182
- else {
183
- // 2番目以降の画像
184
- // 下段
185
- moveTo(allImgs[index].parent(), posX, heightOfLargerImg);
186
- var heightOfImg = allImgSizes[index].ratio * widthOfImg;
187
- resizeTo(allImgs[index], widthOfImg, heightOfImg);
188
200
 
201
+ // 幅を画面いっぱいにする(縦横比はそのまま)
189
- posX += widthOfImg;
202
+ resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
190
203
 
204
+ // コンテナから相対座標
191
- moveTo(allCurtains[index], posX, heightOfLargerImg);
205
+ moveTo(allTexts[index],
206
+ (widthOfLargerImg - allTextSizes[index].width) / 2,
192
- resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg);
207
+ heightOfLargerImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
208
+ // posX += 0;
193
- }
209
+ // カーテンなし
194
210
  }
195
211
  }
196
212
  })(0 - widthOfImg); // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
@@ -249,33 +265,34 @@
249
265
  // カーテンはない
250
266
  (function(posX) {
251
267
  for (var index = 0; index < allImgs.length; index++) {
252
- if (! modeIn2Rows) {
268
+ if (! modeIn2Rows || index !== 0) {
253
- // 1段モード
269
+ // 1段モード または 2段モード2番目以降の画像(下段)
254
270
  // 縦位置は 0 に戻す
255
- moveTo(allImgs[index].parent(), posX, 0);
271
+ var posY = (modeIn2Rows ? heightOfLargerImg : 0);
256
272
  var heightOfImg = allImgSizes[index].ratio * widthOfImg;
273
+
274
+ moveTo(allImgs[index].parent(), posX, posY);
275
+
257
276
  resizeTo(allImgs[index], widthOfImg, heightOfImg);
258
277
 
278
+ // コンテナから相対座標
279
+ moveTo(allTexts[index],
280
+ (widthOfImg - allTextSizes[index].width) / 2,
281
+ heightOfImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
282
+
259
283
  posX += widthOfImg;
260
284
  }
261
285
  else {
262
- // 2段モード
286
+ // 2段モード かつ 最初の画像(上段)
263
- if (index === 0) {
264
- // 最初の画像
265
- // 移動なし、上段
287
+ // 移動なし
266
- // 幅を画面いっぱいにする(縦横比はそのまま)
288
+ // 幅を画面いっぱいにする(縦横比はそのまま)
267
- resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
289
+ resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
268
- // posX += 0;
269
- }
270
- else {
271
- // 2番目以降の画像
272
- // 下段
273
- moveTo(allImgs[index].parent(), posX, heightOfLargerImg);
274
- var heightOfImg = allImgSizes[index].ratio * widthOfImg;
275
- resizeTo(allImgs[index], widthOfImg, heightOfImg);
276
290
 
291
+ // コンテナから相対座標
277
- posX += widthOfImg;
292
+ moveTo(allTexts[index],
293
+ (widthOfLargerImg - allTextSizes[index].width) / 2,
294
+ heightOfLargerImg - allTextSizes[index].height - marginBottomBetweenTextAndImg);
278
- }
295
+ // posX += 0;
279
296
  }
280
297
  }
281
298
  })(0); // 最左の画像の位置は、ブラウザの画面と同じ
@@ -287,21 +304,21 @@
287
304
  <div id="container">
288
305
  <div id="imgWrapper1" class="imgWrapper">
289
306
  <img src="img/second/02.jpg" id="img1" class="img">
290
- <span class="textOnImg">1枚目</span>
307
+ <div class="textOverImg" id="text1">1枚目</div>
291
308
  </div>
292
309
 
293
310
  <div id="curtain1" class="curtain"></div>
294
311
 
295
312
  <div id="imgWrapper2" class="imgWrapper">
296
313
  <img src="img/second/03.jpg" id="img2" class="img">
297
- <span class="textOnImg">2枚目</span>
314
+ <div class="textOverImg" id="text2">2枚目 = my tune</div>
298
315
  </div>
299
316
 
300
317
  <div id="curtain2" class="curtain"></div>
301
318
 
302
319
  <div id="imgWrapper3" class="imgWrapper">
303
320
  <img src="img/second/04.jpg" id="img3" class="img">
304
- <span class="textOnImg">3枚目</span>
321
+ <div class="textOverImg" id="text3">3枚目 - 777</div>
305
322
  </div>
306
323
 
307
324
  <div id="curtain3" class="curtain"></div>

5

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

2017/02/06 13:39

投稿

naomi3
naomi3

スコア1105

answer CHANGED
@@ -16,6 +16,10 @@
16
16
  修正
17
17
 
18
18
  ブラウザの画面幅が1000ピクセル未満の場合、1段目がスライドインして1.5秒後に2段目がスライドインします。
19
+
20
+ 修正
21
+
22
+ 画像にテキストをのせ、画像を伸縮するにはこうです。
19
23
  ```HTML
20
24
  <!DOCTYPE html>
21
25
  <html>
@@ -36,16 +40,24 @@
36
40
  margin-left : -8px; /* 左に余白を作らない */
37
41
  }
38
42
 
39
- .img {
43
+ .imgWrapper /* 1枚の画像およびテキストをのせたdivコンテナ */ {
40
44
  position : absolute;
41
45
  z-index : 0;
46
+ text-align : center;
42
47
  }
43
48
 
44
49
  .curtain {
45
50
  position : absolute;
46
- z-index : 1; /* 画像より手前 */
51
+ z-index : 1; /* 画像より手前 */
47
52
  background-color : white;
48
53
  }
54
+
55
+ .textOnImg /* 画像にのせるテキスト */ {
56
+ position : absolute;
57
+ bottom :50px;
58
+ color : white;
59
+ font-size : xx-large;
60
+ }
49
61
  </style>
50
62
  <script src="jquery-2.1.4.js"></script>
51
63
  <script>
@@ -99,6 +111,7 @@
99
111
 
100
112
 
101
113
  // 画像、カーテンの位置を変更する
114
+ // 画像の場合はそのコンテナ
102
115
  function moveTo(obj, targetPosX, targetPosY) {
103
116
  obj.css('left', targetPosX);
104
117
 
@@ -116,9 +129,9 @@
116
129
  }
117
130
 
118
131
 
119
- // 画像をアニメーションでスライドインする
132
+ // 画像をのせたコンテナをアニメーションでスライドインする
120
- function slideImgIn(img, targetPosX) {
133
+ function slideImgIn(imgWrapper, targetPosX) {
121
- img.animate({
134
+ imgWrapper.animate({
122
135
  'left' : targetPosX
123
136
  }, durationOfAnimation,
124
137
  // アニメーション完了時に動作する
@@ -146,7 +159,9 @@
146
159
  for (var index = 0; index < allImgs.length; index++) {
147
160
  if (! modeIn2Rows) {
148
161
  // 1段モード
149
- moveTo(allImgs[index], posX);
162
+ moveTo(allImgs[index].parent(), posX);
163
+ var heightOfImg = allImgSizes[index].ratio * widthOfImg;
164
+ resizeTo(allImgs[index], widthOfImg, heightOfImg);
150
165
 
151
166
  posX += widthOfImg;
152
167
 
@@ -158,7 +173,7 @@
158
173
  if (index === 0) {
159
174
  // 最初の画像
160
175
  // 上段
161
- moveTo(allImgs[index], 0 - widthOfLargerImg);
176
+ moveTo(allImgs[index].parent(), 0 - widthOfLargerImg);
162
177
  // 幅を画面いっぱいにする(縦横比はそのまま)
163
178
  resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
164
179
  // posX += 0;
@@ -167,7 +182,9 @@
167
182
  else {
168
183
  // 2番目以降の画像
169
184
  // 下段
170
- moveTo(allImgs[index], posX, heightOfLargerImg);
185
+ moveTo(allImgs[index].parent(), posX, heightOfLargerImg);
186
+ var heightOfImg = allImgSizes[index].ratio * widthOfImg;
187
+ resizeTo(allImgs[index], widthOfImg, heightOfImg);
171
188
 
172
189
  posX += widthOfImg;
173
190
 
@@ -184,7 +201,7 @@
184
201
  for (var index = 0; index < allImgs.length; index++) {
185
202
  if (! modeIn2Rows) {
186
203
  // 1段モード
187
- slideImgIn(allImgs[index], posX);
204
+ slideImgIn(allImgs[index].parent(), posX);
188
205
 
189
206
  posX += widthOfImg;
190
207
 
@@ -195,7 +212,7 @@
195
212
  if (index === 0) {
196
213
  // 最初の画像
197
214
  // 上段
198
- slideImgIn(allImgs[index], posX);
215
+ slideImgIn(allImgs[index].parent(), posX);
199
216
  // posX += 0;
200
217
  // カーテンなし
201
218
  }
@@ -207,7 +224,7 @@
207
224
  (function(thisImg, thisCurtain, thisPosX) {
208
225
  setTimeout(function() {
209
226
  // 指定ミリ秒遅れて動作
210
- slideImgIn(thisImg, thisPosX);
227
+ slideImgIn(thisImg.parent(), thisPosX);
211
228
 
212
229
  thisPosX += widthOfImg;
213
230
 
@@ -235,9 +252,9 @@
235
252
  if (! modeIn2Rows) {
236
253
  // 1段モード
237
254
  // 縦位置は 0 に戻す
238
- moveTo(allImgs[index], posX, 0);
255
+ moveTo(allImgs[index].parent(), posX, 0);
239
- // サイズを元に戻す
256
+ var heightOfImg = allImgSizes[index].ratio * widthOfImg;
240
- resizeTo(allImgs[index], allImgSizes[index].width, allImgSizes[index].height);
257
+ resizeTo(allImgs[index], widthOfImg, heightOfImg);
241
258
 
242
259
  posX += widthOfImg;
243
260
  }
@@ -253,7 +270,9 @@
253
270
  else {
254
271
  // 2番目以降の画像
255
272
  // 下段
256
- moveTo(allImgs[index], posX, heightOfLargerImg);
273
+ moveTo(allImgs[index].parent(), posX, heightOfLargerImg);
274
+ var heightOfImg = allImgSizes[index].ratio * widthOfImg;
275
+ resizeTo(allImgs[index], widthOfImg, heightOfImg);
257
276
 
258
277
  posX += widthOfImg;
259
278
  }
@@ -265,14 +284,28 @@
265
284
  </script>
266
285
  </head>
267
286
  <body>
268
- <div id="container">
287
+ <div id="container">
288
+ <div id="imgWrapper1" class="imgWrapper">
269
- <img src="img/second/02.jpg" id="img1" class="img">
289
+ <img src="img/second/02.jpg" id="img1" class="img">
290
+ <span class="textOnImg">1枚目</span>
291
+ </div>
292
+
270
- <div id="curtain1" class="curtain"></div>
293
+ <div id="curtain1" class="curtain"></div>
294
+
295
+ <div id="imgWrapper2" class="imgWrapper">
271
- <img src="img/second/03.jpg" id="img2" class="img">
296
+ <img src="img/second/03.jpg" id="img2" class="img">
297
+ <span class="textOnImg">2枚目</span>
298
+ </div>
299
+
272
- <div id="curtain2" class="curtain"></div>
300
+ <div id="curtain2" class="curtain"></div>
301
+
302
+ <div id="imgWrapper3" class="imgWrapper">
273
- <img src="img/second/04.jpg" id="img3" class="img">
303
+ <img src="img/second/04.jpg" id="img3" class="img">
304
+ <span class="textOnImg">3枚目</span>
305
+ </div>
306
+
274
- <div id="curtain3" class="curtain"></div>
307
+ <div id="curtain3" class="curtain"></div>
275
- </div>
308
+ </div>
276
309
  </body>
277
310
  </html>
278
311
  ```

4

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

2017/02/05 07:19

投稿

naomi3
naomi3

スコア1105

answer CHANGED
@@ -12,6 +12,10 @@
12
12
 
13
13
  iPhoneを持っていないので、iPhoneチェックサイトでチェックしました。
14
14
  PCでもブラウザ幅を変えると2段になりますよ。
15
+
16
+ 修正
17
+
18
+ ブラウザの画面幅が1000ピクセル未満の場合、1段目がスライドインして1.5秒後に2段目がスライドインします。
15
19
  ```HTML
16
20
  <!DOCTYPE html>
17
21
  <html>
@@ -46,74 +50,78 @@
46
50
  <script src="jquery-2.1.4.js"></script>
47
51
  <script>
48
52
  $(function() {
53
+ // スライドインする時間差
54
+ var delayBetweenSlideIn = 1500; // milliseconds
55
+ // アニメーションの時間
49
- var animatedDuration = 800; // milliseconds
56
+ var durationOfAnimation = 800; // milliseconds
50
57
  // スライドインする画像のオブジェクト全て(左から)
51
58
  var allImgs = [ $('#img1'), $('#img2'), $('#img3') ];
59
+ // 画像のもとのサイズ(幅、高さ、縦横比)全て(左から)
60
+ var allImgSizes = [];
61
+ // 画像のもとの高さの最大値
62
+ var maxHeightOfImg = 0;
52
63
  // 画像を隠すカーテンのオブジェクト全て(左から)
53
64
  var allCurtains = [ $('#curtain1'), $('#curtain2'), $('#curtain3') ];
65
+ // ブラウザの画面幅がこの値より狭くなると2段モード
66
+ var discontinuousWidth = 1000;
67
+ // 2段にするか否か
68
+ var modeIn2Rows;
69
+ // 画像の実際の幅
70
+ var widthOfImg;
71
+ // 大きい方の画像の実際の幅
72
+ var widthOfLargerImg;
73
+ // 大きい方の画像の実際の高さ
74
+ var heightOfLargerImg;
54
75
 
55
- var discontinuousWidth = 1000; // ブラウザの画面幅がこの値より狭くなると2段モード
56
- var originalWidthOfImg = 700; // 画像の元の幅
57
- var originalHeightOfImg = 400; // 画像の元の高さ
58
- var ratioOfImg = originalHeightOfImg / originalWidthOfImg; // 画像の縦・横の比
59
76
 
77
+ // 画像のもとのサイズ、高さの最大値を算出
78
+ allImgs.forEach(function(currentImg, index) {
60
- var widthOfWindow;
79
+ var width = currentImg.width();
61
- var heightOfWindow;
80
+ var height = currentImg.height();
62
- var modeIn2Rows; // 2段にするか否か
81
+ var ratio = height / width; // 画像の縦横比
63
- var widthOfImg;
64
- var heightOfImg;
82
+ allImgSizes[index] = { 'width' : width, 'height' : height, 'ratio' : ratio };
65
83
 
84
+ maxHeightOfImg = Math.max(maxHeightOfImg, height);
85
+ });
86
+
87
+
88
+ calculateSizes();
89
+
90
+
91
+ // ブラウザの画面幅に応じてサイズを(再)計算する
66
92
  function calculateSizes() {
67
- widthOfWindow = $(window).width();
93
+ var widthOfWindow = $(window).width();
68
- heightOfWindow = $(window).height();
69
94
  modeIn2Rows = (widthOfWindow < discontinuousWidth);
70
- widthOfImg = widthOfWindow / (modeIn2Rows ? allImgs.length - 1 : allImgs.length);
95
+ widthOfImg = widthOfWindow / (modeIn2Rows ? allImgs.length - 1 : allImgs.length);
96
+ widthOfLargerImg = widthOfWindow;
71
- heightOfImg = ratioOfImg * widthOfImg;
97
+ heightOfLargerImg = allImgSizes[0].ratio * widthOfLargerImg;
72
98
  }
73
99
 
74
- calculateSizes();
75
100
 
76
- // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
77
- // ブラウザの画面幅があらかじめわからないので、CSSではなく、
78
- // JavaScriptで、画像およびカーテンの初期位置・幅を設定する。
79
- (function(pos) {
80
- for (var i = 0; i < allImgs.length; i++)
81
- {
82
- if (modeIn2Rows && i === allImgs.length - 1) {
83
- // 2段モードかつ最後の画像
101
+ // 画像、カーテンの位置を変更する
84
- moveToAndResizeTo(allImgs[i], - widthOfWindow,
85
- widthOfWindow, ratioOfImg * widthOfWindow,
86
- originalHeightOfImg);
87
- }
88
- else {
89
- moveTo(allImgs[i], pos);
90
- pos += widthOfImg;
91
- moveToAndResizeTo(allCurtains[i], pos,
102
+ function moveTo(obj, targetPosX, targetPosY) {
103
+ obj.css('left', targetPosX);
104
+
105
+ if (typeof targetPosY !== 'undefined') {
106
+ // targetPosY が指定されているときのみ変更する
92
- widthOfImg, originalHeightOfImg);
107
+ obj.css('top', targetPosY);
93
- }
94
108
  }
95
- })(- widthOfImg); // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
109
+ }
96
110
 
97
111
 
112
+ // 画像、カーテンのサイズを変更する
98
- function moveTo(img, targetPos) {
113
+ function resizeTo(obj, targetWidth, targetHeight) {
99
- img.css('left', targetPos);
114
+ obj.css('width', targetWidth)
115
+ .css('height', targetHeight);
100
116
  }
101
117
 
102
- function moveToAndResizeTo(obj, targetPos, tagetWidth, targetHeight, targetVertPos) {
103
- obj.css('left', targetPos)
104
- .css('width', tagetWidth)
105
- .css('height', targetHeight);
106
118
 
107
- if (typeof targetVertPos !== 'undefined') {
108
- obj.css('top', targetVertPos);
119
+ // 画像をアニメーションでスライドインする
109
- }
110
- }
111
-
112
- function slideImgIn(img, targetPos) {
120
+ function slideImgIn(img, targetPosX) {
113
121
  img.animate({
114
- 'left' : targetPos
122
+ 'left' : targetPosX
115
- }, animatedDuration,
123
+ }, durationOfAnimation,
116
- // アニメーション完了時に動作する。
124
+ // アニメーション完了時に動作する
117
125
  function() {
118
126
  // アニメーション中は overflow : hidden になっているので、
119
127
  // アニメーション完了後も overflow : hidden にする。
@@ -121,26 +129,96 @@
121
129
  });
122
130
  }
123
131
 
132
+
133
+ // カーテンをアニメーションで開ける
124
- function openCurtain(curtain, targetPos) {
134
+ function openCurtain(curtain, targetPosX) {
125
135
  curtain.animate({
126
- 'left' : targetPos,
136
+ 'left' : targetPosX,
137
+ 'width' : 0
127
- 'width' : 0 // 最終的に幅が 0 になる。
138
+ // 最終的に幅が 0 になる。
128
- }, animatedDuration);
139
+ }, durationOfAnimation);
129
140
  }
130
141
 
131
142
 
143
+ // ブラウザの画面幅があらかじめわからないので、CSSではなく、
144
+ // JavaScriptで、画像およびカーテンの初期位置・サイズを設定する。
145
+ (function(posX) {
146
+ for (var index = 0; index < allImgs.length; index++) {
147
+ if (! modeIn2Rows) {
148
+ // 1段モード
149
+ moveTo(allImgs[index], posX);
150
+
151
+ posX += widthOfImg;
152
+
153
+ moveTo(allCurtains[index], posX);
154
+ resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg);
155
+ }
156
+ else {
157
+ // 2段モード
158
+ if (index === 0) {
159
+ // 最初の画像
160
+ // 上段
161
+ moveTo(allImgs[index], 0 - widthOfLargerImg);
162
+ // 幅を画面いっぱいにする(縦横比はそのまま)
163
+ resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
164
+ // posX += 0;
165
+ // カーテンなし
166
+ }
167
+ else {
168
+ // 2番目以降の画像
169
+ // 下段
170
+ moveTo(allImgs[index], posX, heightOfLargerImg);
171
+
172
+ posX += widthOfImg;
173
+
174
+ moveTo(allCurtains[index], posX, heightOfLargerImg);
175
+ resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg);
176
+ }
177
+ }
178
+ }
179
+ })(0 - widthOfImg); // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
180
+
181
+
132
182
  // 画像およびカーテンのアニメーション設定
133
- (function(pos) {
183
+ (function(posX) {
134
- for (var i = 0; i < allImgs.length; i++)
184
+ for (var index = 0; index < allImgs.length; index++) {
135
- {
136
- if (modeIn2Rows && i === allImgs.length - 1) {
185
+ if (! modeIn2Rows) {
137
- // 2段モードかつ最後の画像
186
+ // 1段モード
138
- slideImgIn(allImgs[i], 0);
187
+ slideImgIn(allImgs[index], posX);
188
+
189
+ posX += widthOfImg;
190
+
191
+ openCurtain(allCurtains[index], posX);
139
192
  }
140
193
  else {
194
+ // 2段モード
195
+ if (index === 0) {
196
+ // 最初の画像
197
+ // 上段
141
- slideImgIn(allImgs[i], pos);
198
+ slideImgIn(allImgs[index], posX);
199
+ // posX += 0;
200
+ // カーテンなし
201
+ }
202
+ else {
203
+ // 2番目以降の画像
204
+ // 下段
205
+ // setTimeoutのコールバック関数に変化する値を
206
+ // 正しくわたすため、forループの実行毎に異なるスコープを作る
207
+ (function(thisImg, thisCurtain, thisPosX) {
208
+ setTimeout(function() {
209
+ // 指定ミリ秒遅れて動作
210
+ slideImgIn(thisImg, thisPosX);
211
+
212
+ thisPosX += widthOfImg;
213
+
214
+ openCurtain(thisCurtain, thisPosX);
215
+ },
216
+ delayBetweenSlideIn);
217
+ })
218
+ (allImgs[index], allCurtains[index], posX);
219
+
142
- pos += widthOfImg;
220
+ posX += widthOfImg;
143
- openCurtain(allCurtains[i], pos);
221
+ }
144
222
  }
145
223
  }
146
224
  })(0); // 最左の画像の位置は、ブラウザの画面と同じ
@@ -150,20 +228,35 @@
150
228
  $(window).on('resize', function() {
151
229
  calculateSizes();
152
230
 
153
- // ブラウザの画面幅に合わせて、画像の位置を再設定する。
231
+ // ブラウザの画面幅に合わせて、画像の位置・サイズを再設定する。
232
+ // カーテンはない
154
- (function(pos) {
233
+ (function(posX) {
155
- for (var i = 0; i < allImgs.length; i++) {
234
+ for (var index = 0; index < allImgs.length; index++) {
156
- if (modeIn2Rows && i === allImgs.length - 1) {
235
+ if (! modeIn2Rows) {
157
- // 2段モードかつ最後の画像
236
+ // 1段モード
237
+ // 縦位置は 0 に戻す
158
- moveToAndResizeTo(allImgs[i], 0,
238
+ moveTo(allImgs[index], posX, 0);
239
+ // サイズを元に戻す
159
- widthOfWindow, ratioOfImg * widthOfWindow,
240
+ resizeTo(allImgs[index], allImgSizes[index].width, allImgSizes[index].height);
241
+
160
- originalHeightOfImg);
242
+ posX += widthOfImg;
161
243
  }
162
244
  else {
245
+ // 2段モード
246
+ if (index === 0) {
247
+ // 最初の画像
248
+ // 移動なし、上段
163
- moveToAndResizeTo(allImgs[i], pos,
249
+ // 幅を画面いっぱいにする(縦横比はそのまま)
250
+ resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg);
251
+ // posX += 0;
252
+ }
253
+ else {
254
+ // 2番目以降の画像
255
+ // 下段
164
- originalWidthOfImg, originalHeightOfImg,
256
+ moveTo(allImgs[index], posX, heightOfLargerImg);
165
- 0);
257
+
166
- pos += widthOfImg;
258
+ posX += widthOfImg;
259
+ }
167
260
  }
168
261
  }
169
262
  })(0); // 最左の画像の位置は、ブラウザの画面と同じ

3

レスポンシブ対応

2017/02/04 12:17

投稿

naomi3
naomi3

スコア1105

answer CHANGED
@@ -7,6 +7,11 @@
7
7
  修正
8
8
 
9
9
  コードを少しすっきりさせました。
10
+
11
+ 修正
12
+
13
+ iPhoneを持っていないので、iPhoneチェックサイトでチェックしました。
14
+ PCでもブラウザ幅を変えると2段になりますよ。
10
15
  ```HTML
11
16
  <!DOCTYPE html>
12
17
  <html>
@@ -15,6 +20,7 @@
15
20
  <title>3 Images Slide In</title>
16
21
  <style>
17
22
  body {
23
+ position : relative;
18
24
  overflow : hidden; /* スクロールバーを表示させない */
19
25
  }
20
26
 
@@ -22,8 +28,6 @@
22
28
  position : relative;
23
29
  top : 0px;
24
30
  left : 0px;
25
- width : 100%;
26
- height : 100%;
27
31
  margin-top : -8px; /* 上に余白を作らない */
28
32
  margin-left : -8px; /* 左に余白を作らない */
29
33
  }
@@ -35,7 +39,6 @@
35
39
 
36
40
  .curtain {
37
41
  position : absolute;
38
- height : 700px;
39
42
  z-index : 1; /* 画像より手前 */
40
43
  background-color : white;
41
44
  }
@@ -48,29 +51,62 @@
48
51
  var allImgs = [ $('#img1'), $('#img2'), $('#img3') ];
49
52
  // 画像を隠すカーテンのオブジェクト全て(左から)
50
53
  var allCurtains = [ $('#curtain1'), $('#curtain2'), $('#curtain3') ];
51
- var maxWidthOfImg = 700;
52
- var widthOfWindow = $(window).width();
53
- var widthOfImg = widthOfWindow / allImgs.length;
54
54
 
55
+ var discontinuousWidth = 1000; // ブラウザの画面幅がこの値より狭くなると2段モード
56
+ var originalWidthOfImg = 700; // 画像の元の幅
57
+ var originalHeightOfImg = 400; // 画像の元の高さ
58
+ var ratioOfImg = originalHeightOfImg / originalWidthOfImg; // 画像の縦・横の比
55
59
 
60
+ var widthOfWindow;
61
+ var heightOfWindow;
62
+ var modeIn2Rows; // 2段にするか否か
63
+ var widthOfImg;
64
+ var heightOfImg;
65
+
66
+ function calculateSizes() {
67
+ widthOfWindow = $(window).width();
68
+ heightOfWindow = $(window).height();
69
+ modeIn2Rows = (widthOfWindow < discontinuousWidth);
70
+ widthOfImg = widthOfWindow / (modeIn2Rows ? allImgs.length - 1 : allImgs.length);
71
+ heightOfImg = ratioOfImg * widthOfImg;
72
+ }
73
+
74
+ calculateSizes();
75
+
76
+ // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
56
77
  // ブラウザの画面幅があらかじめわからないので、CSSではなく、
57
78
  // JavaScriptで、画像およびカーテンの初期位置・幅を設定する。
58
79
  (function(pos) {
59
- for (var i = 0; i < allImgs.length; i++) {
80
+ for (var i = 0; i < allImgs.length; i++)
81
+ {
82
+ if (modeIn2Rows && i === allImgs.length - 1) {
83
+ // 2段モードかつ最後の画像
84
+ moveToAndResizeTo(allImgs[i], - widthOfWindow,
85
+ widthOfWindow, ratioOfImg * widthOfWindow,
86
+ originalHeightOfImg);
87
+ }
88
+ else {
60
- moveImgTo(allImgs[i], pos);
89
+ moveTo(allImgs[i], pos);
61
- pos += widthOfImg;
90
+ pos += widthOfImg;
62
- moveCurtainTo(allCurtains[i], pos, widthOfImg);
91
+ moveToAndResizeTo(allCurtains[i], pos,
92
+ widthOfImg, originalHeightOfImg);
93
+ }
63
94
  }
64
95
  })(- widthOfImg); // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
65
96
 
66
97
 
67
- function moveImgTo(img, targetPos) {
98
+ function moveTo(img, targetPos) {
68
99
  img.css('left', targetPos);
69
100
  }
70
101
 
71
- function moveCurtainTo(curtain, targetPos, tagetWidth) {
102
+ function moveToAndResizeTo(obj, targetPos, tagetWidth, targetHeight, targetVertPos) {
72
- curtain.css('left', targetPos)
103
+ obj.css('left', targetPos)
73
- .css('width', tagetWidth);
104
+ .css('width', tagetWidth)
105
+ .css('height', targetHeight);
106
+
107
+ if (typeof targetVertPos !== 'undefined') {
108
+ obj.css('top', targetVertPos);
109
+ }
74
110
  }
75
111
 
76
112
  function slideImgIn(img, targetPos) {
@@ -95,24 +131,40 @@
95
131
 
96
132
  // 画像およびカーテンのアニメーション設定
97
133
  (function(pos) {
98
- for (var i = 0; i < allImgs.length; i++) {
134
+ for (var i = 0; i < allImgs.length; i++)
135
+ {
136
+ if (modeIn2Rows && i === allImgs.length - 1) {
137
+ // 2段モードかつ最後の画像
138
+ slideImgIn(allImgs[i], 0);
139
+ }
140
+ else {
99
- slideImgIn(allImgs[i], pos);
141
+ slideImgIn(allImgs[i], pos);
100
- pos += widthOfImg;
142
+ pos += widthOfImg;
101
- openCurtain(allCurtains[i], pos);
143
+ openCurtain(allCurtains[i], pos);
144
+ }
102
145
  }
103
146
  })(0); // 最左の画像の位置は、ブラウザの画面と同じ
104
147
 
105
148
 
106
149
  // ブラウザの画面幅が変わったときに動作する。
107
150
  $(window).on('resize', function() {
108
- widthOfWindow = $(window).width();
151
+ calculateSizes();
109
- widthOfImg = widthOfWindow / allImgs.length;
110
152
 
111
153
  // ブラウザの画面幅に合わせて、画像の位置を再設定する。
112
154
  (function(pos) {
113
155
  for (var i = 0; i < allImgs.length; i++) {
156
+ if (modeIn2Rows && i === allImgs.length - 1) {
157
+ // 2段モードかつ最後の画像
158
+ moveToAndResizeTo(allImgs[i], 0,
159
+ widthOfWindow, ratioOfImg * widthOfWindow,
160
+ originalHeightOfImg);
161
+ }
162
+ else {
114
- moveImgTo(allImgs[i], pos);
163
+ moveToAndResizeTo(allImgs[i], pos,
164
+ originalWidthOfImg, originalHeightOfImg,
165
+ 0);
115
- pos += widthOfImg;
166
+ pos += widthOfImg;
167
+ }
116
168
  }
117
169
  })(0); // 最左の画像の位置は、ブラウザの画面と同じ
118
170
  });

2

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

2017/01/09 05:50

投稿

naomi3
naomi3

スコア1105

answer CHANGED
@@ -3,6 +3,10 @@
3
3
  修正
4
4
 
5
5
  画像の幅が同じで、画像の幅 x 3 がブラウザの画面幅より大きい画像を用意して下さい。そうでないと、隙間ができます。
6
+
7
+ 修正
8
+
9
+ コードを少しすっきりさせました。
6
10
  ```HTML
7
11
  <!DOCTYPE html>
8
12
  <html>
@@ -40,28 +44,26 @@
40
44
  <script>
41
45
  $(function() {
42
46
  var animatedDuration = 800; // milliseconds
47
+ // スライドインする画像のオブジェクト全て(左から)
48
+ var allImgs = [ $('#img1'), $('#img2'), $('#img3') ];
49
+ // 画像を隠すカーテンのオブジェクト全て(左から)
50
+ var allCurtains = [ $('#curtain1'), $('#curtain2'), $('#curtain3') ];
51
+ var maxWidthOfImg = 700;
43
52
  var widthOfWindow = $(window).width();
44
- var widthOfImg = widthOfWindow / 3;
53
+ var widthOfImg = widthOfWindow / allImgs.length;
45
- var pos;
46
54
 
47
55
 
48
56
  // ブラウザの画面幅があらかじめわからないので、CSSではなく、
49
57
  // JavaScriptで、画像およびカーテンの初期位置・幅を設定する。
58
+ (function(pos) {
59
+ for (var i = 0; i < allImgs.length; i++) {
60
+ moveImgTo(allImgs[i], pos);
50
- pos = - widthOfImg;
61
+ pos += widthOfImg;
62
+ moveCurtainTo(allCurtains[i], pos, widthOfImg);
63
+ }
64
+ })(- widthOfImg); // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左
51
65
 
52
- moveImgTo($('#img1'), pos);
53
- pos += widthOfImg;
54
- moveCurtainTo($('#curtain1'), pos, widthOfImg);
55
66
 
56
- moveImgTo($('#img2'), pos);
57
- pos += widthOfImg;
58
- moveCurtainTo($('#curtain2'), pos, widthOfImg);
59
-
60
- moveImgTo($('#img3'), pos);
61
- pos += widthOfImg;
62
- moveCurtainTo($('#curtain3'), pos, widthOfImg);
63
-
64
-
65
67
  function moveImgTo(img, targetPos) {
66
68
  img.css('left', targetPos);
67
69
  }
@@ -92,35 +94,27 @@
92
94
 
93
95
 
94
96
  // 画像およびカーテンのアニメーション設定
97
+ (function(pos) {
98
+ for (var i = 0; i < allImgs.length; i++) {
99
+ slideImgIn(allImgs[i], pos);
95
- pos = 0;
100
+ pos += widthOfImg;
101
+ openCurtain(allCurtains[i], pos);
102
+ }
103
+ })(0); // 最左の画像の位置は、ブラウザの画面と同じ
96
104
 
97
- slideImgIn($('#img1'), pos);
98
- pos += widthOfImg;
99
- openCurtain($('#curtain1'), pos);
100
105
 
101
- slideImgIn($('#img2'), pos);
102
- pos += widthOfImg;
103
- openCurtain($('#curtain2'), pos);
104
-
105
- slideImgIn($('#img3'), pos);
106
- pos += widthOfImg;
107
- openCurtain($('#curtain3'), pos);
108
-
109
-
110
106
  // ブラウザの画面幅が変わったときに動作する。
111
107
  $(window).on('resize', function() {
112
108
  widthOfWindow = $(window).width();
113
- widthOfImg = widthOfWindow / 3;
109
+ widthOfImg = widthOfWindow / allImgs.length;
114
110
 
115
111
  // ブラウザの画面幅に合わせて、画像の位置を再設定する。
116
- pos = 0;
112
+ (function(pos) {
113
+ for (var i = 0; i < allImgs.length; i++) {
117
- // #img1の位置は変化しない。
114
+ moveImgTo(allImgs[i], pos);
118
-
119
- pos += widthOfImg;
115
+ pos += widthOfImg;
116
+ }
120
- moveImgTo($('#img2'), pos);
117
+ })(0); // 最左の画像の位置は、ブラウザの画面と同じ
121
-
122
- pos += widthOfImg;
123
- moveImgTo($('#img3'), pos);
124
118
  });
125
119
  });
126
120
  </script>

1

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

2017/01/08 14:38

投稿

naomi3
naomi3

スコア1105

answer CHANGED
@@ -1,4 +1,8 @@
1
1
  画像の幅が左から、400px, 450px, 350pxの場合です。#containerの位置・サイズ、画像のpadding, border, marginを考慮していません。画像のスライドインに伴って、画像を隠しているカーテンが開く実装方法です。
2
+
3
+ 修正
4
+
5
+ 画像の幅が同じで、画像の幅 x 3 がブラウザの画面幅より大きい画像を用意して下さい。そうでないと、隙間ができます。
2
6
  ```HTML
3
7
  <!DOCTYPE html>
4
8
  <html>
@@ -6,87 +10,129 @@
6
10
  <meta charset="UTF-8">
7
11
  <title>3 Images Slide In</title>
8
12
  <style>
13
+ body {
14
+ overflow : hidden; /* スクロールバーを表示させない */
15
+ }
16
+
9
17
  #container {
10
18
  position : relative;
19
+ top : 0px;
20
+ left : 0px;
21
+ width : 100%;
22
+ height : 100%;
23
+ margin-top : -8px; /* 上に余白を作らない */
24
+ margin-left : -8px; /* 左に余白を作らない */
11
25
  }
12
26
 
13
- #img1 {
27
+ .img {
14
28
  position : absolute;
15
- left : -400px; /* 0px - #img1のwidth */
16
29
  z-index : 0;
17
30
  }
18
31
 
19
- #curtain1 {
32
+ .curtain {
20
33
  position : absolute;
21
- left : 0px;
34
+ height : 700px;
22
- width : 400px; /* #img1のwidth */
23
- height : 600px; /* #img1, #img2のheightより長い */
24
35
  z-index : 1; /* 画像より手前 */
25
36
  background-color : white;
26
37
  }
27
-
28
- #img2 {
29
- position : absolute;
30
- left : -50px; /* 400px - 450px */
31
- z-index : 0;
32
- }
33
-
34
- #curtain2 {
35
- position : absolute;
36
- left : 400px; /* 0px + #img1のwidth */
37
- width : 450px; /* #img2のwidth */
38
- height : 600px; /* #img2, #img3のheightより長い */
39
- z-index : 1; /* 画像より手前 */
40
- background-color : white;
41
- }
42
-
43
- #img3 {
44
- position : absolute;
45
- left : 500px; /* 400px + 450px - 350px */
46
- z-index : 0;
47
- }
48
38
  </style>
49
39
  <script src="jquery-2.1.4.js"></script>
50
40
  <script>
51
41
  $(function() {
52
42
  var animatedDuration = 800; // milliseconds
43
+ var widthOfWindow = $(window).width();
53
- var widthOfImg1 = 400;
44
+ var widthOfImg = widthOfWindow / 3;
54
- var widthOfImg2 = 450;
55
- var widthOfImg3 = 350;
56
- var pos = 0;
45
+ var pos;
57
46
 
47
+
48
+ // ブラウザの画面幅があらかじめわからないので、CSSではなく、
49
+ // JavaScriptで、画像およびカーテンの初期位置・幅を設定する。
50
+ pos = - widthOfImg;
51
+
52
+ moveImgTo($('#img1'), pos);
53
+ pos += widthOfImg;
54
+ moveCurtainTo($('#curtain1'), pos, widthOfImg);
55
+
56
+ moveImgTo($('#img2'), pos);
57
+ pos += widthOfImg;
58
+ moveCurtainTo($('#curtain2'), pos, widthOfImg);
59
+
60
+ moveImgTo($('#img3'), pos);
61
+ pos += widthOfImg;
62
+ moveCurtainTo($('#curtain3'), pos, widthOfImg);
63
+
64
+
65
+ function moveImgTo(img, targetPos) {
66
+ img.css('left', targetPos);
67
+ }
68
+
69
+ function moveCurtainTo(curtain, targetPos, tagetWidth) {
70
+ curtain.css('left', targetPos)
71
+ .css('width', tagetWidth);
72
+ }
73
+
58
74
  function slideImgIn(img, targetPos) {
59
75
  img.animate({
60
- 'left': targetPos
76
+ 'left' : targetPos
61
- }, animatedDuration);
77
+ }, animatedDuration,
78
+ // アニメーション完了時に動作する。
79
+ function() {
80
+ // アニメーション中は overflow : hidden になっているので、
81
+ // アニメーション完了後も overflow : hidden にする。
82
+ $(this).css('overflow', 'hidden');
83
+ });
62
84
  }
63
85
 
64
86
  function openCurtain(curtain, targetPos) {
65
87
  curtain.animate({
66
- 'left': targetPos,
88
+ 'left' : targetPos,
67
- 'width' : 0
89
+ 'width' : 0 // 最終的に幅が 0 になる。
68
90
  }, animatedDuration);
69
91
  }
70
92
 
93
+
94
+ // 画像およびカーテンのアニメーション設定
95
+ pos = 0;
96
+
71
97
  slideImgIn($('#img1'), pos);
98
+ pos += widthOfImg;
99
+ openCurtain($('#curtain1'), pos);
72
100
 
73
- pos += widthOfImg1;
74
- openCurtain($('#curtain1'), pos)
75
101
  slideImgIn($('#img2'), pos);
102
+ pos += widthOfImg;
103
+ openCurtain($('#curtain2'), pos);
76
104
 
77
- pos += widthOfImg2;
78
- openCurtain($('#curtain2'), pos)
79
105
  slideImgIn($('#img3'), pos);
106
+ pos += widthOfImg;
107
+ openCurtain($('#curtain3'), pos);
108
+
109
+
110
+ // ブラウザの画面幅が変わったときに動作する。
111
+ $(window).on('resize', function() {
112
+ widthOfWindow = $(window).width();
113
+ widthOfImg = widthOfWindow / 3;
114
+
115
+ // ブラウザの画面幅に合わせて、画像の位置を再設定する。
116
+ pos = 0;
117
+ // #img1の位置は変化しない。
118
+
119
+ pos += widthOfImg;
120
+ moveImgTo($('#img2'), pos);
121
+
122
+ pos += widthOfImg;
123
+ moveImgTo($('#img3'), pos);
124
+ });
80
125
  });
81
126
  </script>
82
127
  </head>
83
128
  <body>
84
129
  <div id="container">
85
- <img src="img/second/01.jpg" id="img1">
130
+ <img src="img/second/02.jpg" id="img1" class="img">
86
- <div id="curtain1"></div>
131
+ <div id="curtain1" class="curtain"></div>
87
- <img src="img/first/01.jpg" id="img2">
88
- <div id="curtain2"></div>
89
- <img src="img/third/03.jpg" id="img3">
132
+ <img src="img/second/03.jpg" id="img2" class="img">
133
+ <div id="curtain2" class="curtain"></div>
134
+ <img src="img/second/04.jpg" id="img3" class="img">
135
+ <div id="curtain3" class="curtain"></div>
90
136
  </div>
91
137
  </body>
92
138
  </html>