回答編集履歴

jQuery3\.1\.1対応。

2017/02/26 03:36

投稿

naomi3

スコア1105

answer CHANGED Viewed

@@ -6,6 +6,10 @@
 バグを修正しました。
 これでどうですか？
+修正
+jQueryのバージョンによるものでした。3.1.1に対応しました。
 ```HTML
 <!DOCTYPE html>
 <html>
@@ -68,7 +72,7 @@
   border-right: solid 1px;
 }
 </style>
-<script src="jquery-2.1.4.js"></script>
+<script src="jquery-3.1.1.min.js"></script>
 <script>
 $(function() {
 	// 背景画像のフェードアウト開始までの時間
@@ -128,11 +132,11 @@
 	// IEでは、ここでアニメーションが正しく動作する
-	inititialize();
+	initialize();
 	// 画像の読み込みが完了後に動作
 	// Safariでは、ここで正しく画像の縦横比を取得できる
-	$(window).on('load', inititialize);
+	$(window).on('load', initialize);
 	/**
 	 * オブジェクト(画像、カーテン、テキスト、メニュー)の位置・サイズを設定する
@@ -187,7 +191,7 @@
 		resizeTo($('.menuItem'), widthOfMenuItem)
 	}
-	function inititialize() {
+	function initialize() {
 		if (initialized || ! calcSizes()) {
 			return;
 		}
@@ -301,7 +305,7 @@
 		var marginOfMenu = (menu.css('margin-left').replace(/px$/, '')  - 0) +
 		                   (menu.css('margin-right').replace(/px$/, '') - 0);
-		var menuItems = $('.menuItem').size();
+		var menuItems = $('.menuItem').length;
 		widthOfMenu = Math.min(maxWidthOfMenu,
                         widthOfWindow - borderOfMenu * (menuItems + 1) + marginOfMenu)
 		widthOfMenuItem = widthOfMenu / menuItems - 4;

軽微なバグ修正

2017/02/26 03:36

投稿

naomi3

スコア1105

answer CHANGED Viewed

@@ -1,6 +1,11 @@
 修正
 背景画像を画面いっぱい(縦横比はそのまま)に、メニューのバグを直しました。
+修正
+バグを修正しました。
+これでどうですか？
 ```HTML
 <!DOCTYPE html>
 <html>
@@ -61,7 +66,7 @@
 }
 #menu :last-child {
   border-right: solid 1px;
-} */
+}
 </style>
 <script src="jquery-2.1.4.js"></script>
 <script>

背景画像を画面いっぱいに、メニューのバグ修正

2017/02/21 15:14

投稿

naomi3

スコア1105

answer CHANGED Viewed

@@ -1,3 +1,6 @@
+修正
+背景画像を画面いっぱい(縦横比はそのまま)に、メニューのバグを直しました。
 ```HTML
 <!DOCTYPE html>
 <html>
@@ -11,13 +14,13 @@
 }
 #container {
   position: relative;
-  margin-top : -8px; /* 上に余白を作らない */
+  margin-top:  -8px; /* 上に余白を作らない */
   margin-left: -8px; /* 左に余白を作らない */
 }
 #backgroundImg {
   position: absolute;
 }
-.imgWrapper /* 1枚の画像、テキストをのせたコンテナ */ {
+.imgWrapper /* 1枚の画像とテキストをのせたコンテナ */ {
   position: absolute;
   z-index: 0;
 }
@@ -33,7 +36,7 @@
 }
 .textOverImg /* 画像にのせるテキスト */ {
   position: absolute;
-  width : 180px;
+  width:  180px;
   height:  30px;
   color: white;
   font-size: x-large;
@@ -44,7 +47,7 @@
 #menu {
   position: relative;
   overflow: hidden;
-  margin-left : -4px;
+  margin-left:  -4px;
   margin-right: -4px;
   display: none; /* 初期状態は非表示 */
 }
@@ -53,10 +56,12 @@
   float: left;
   text-align: center;
 }
-#menuItem1, #menuItem3 /* ボーダーが2重になるので、#menuItem2は設定しない */ {
+.menuItem {
-  border-left : solid 1px;
+  border-left:  solid 1px;
+}
+#menu :last-child {
   border-right: solid 1px;
-}
+} */
 </style>
 <script src="jquery-2.1.4.js"></script>
 <script>
@@ -69,30 +74,37 @@
 	var delayBetweenSlides = 1500; // ミリ秒
 	// スライドイン中の時間
 	var durationOfSlide =  800; // ミリ秒
 	// 背景画像
 	var backgroundImg = $('#backgroundImg');
-	// 背景画像のサイズ(幅、高さ)
+	// 背景画像の縦横比
-	var backgroundImgSize = null; // 未設定
+	var backgroundImgRatio = null; // 未設定
 	// 画面幅がこの値より狭くなると2段モード
 	var discontinuousWidth = 1000; // px
 	// 画面幅
 	var widthOfWindow;
 	// 2段モードか否か
 	var modeIn2Rows;
 	// スライドインする画像(左から)
 	var imgs = [ $('#img1'), $('#img2'), $('#img3') ];
-	// 画像のもとのサイズ(縦横比)(左から)
+	// 画像の縦横比(左から)
-	var imgSizes = []; // 未設定
+	var imgRatios = []; // 未設定
 	// 画像の実際の幅
 	var widthOfImg;
 	// 大きい方の画像の実際の幅、高さ
 	var widthOfLargerImg, heightOfLargerImg;
 	// 画像にのせるテキストのコンテナ(左から)
 	var texts = [ $('#text1'), $('#text2'), $('#text3') ];
 	// 画像にのせるテキストのサイズ(幅、高さ)(左から)
 	var textSizes = []; // 未設定
 	// 画像を隠すカーテン(左から)
 	var curtains = [ $('#curtain1'), $('#curtain2'), $('#curtain3') ];
 	// メニュー
 	var menu = $('#menu');
 	// 画像とメニューの隙間
@@ -105,6 +117,7 @@
 	var widthOfMenu;
 	// 1メニュー項目の幅
 	var widthOfMenuItem;
 	// 初期処理が正しくできたか否か
 	var initialized = false;
@@ -113,7 +126,7 @@
 	inititialize();
 	// 画像の読み込みが完了後に動作
-	// Safariでは、ここで正しく画像のサイズを取得できる
+	// Safariでは、ここで正しく画像の縦横比を取得できる
 	$(window).on('load', inititialize);
 	/**
@@ -130,7 +143,7 @@
 				// 1段モード または 2段モード2番目以降の画像(下段)
 				// 1段モードの時、縦位置は 0 に戻す
 				var posY = (modeIn2Rows ? heightOfLargerImg : 0);
-				var heightOfImg = imgSizes[index] * widthOfImg;
+				var heightOfImg = imgRatios[index] * widthOfImg;
 				maxHeightOfImg = Math.max(maxHeightOfImg, heightOfImg);
 				// 画像、テキストをのせたコンテナを移動
@@ -158,7 +171,8 @@
 				moveTo(texts[index],
 					(widthOfLargerImg  - textSizes[index].width)  / 2,
 					(heightOfLargerImg - textSizes[index].height) / 2);
-				// posX += 0; // カーテンなし
+				// posX += 0;
+				// カーテンなし
 			}
 		}
@@ -174,9 +188,7 @@
 		}
 		// 初期処理が正しくできておらず、サイズを計算できた時に続行
-		moveTo(backgroundImg,
-			(widthOfWindow  - backgroundImgSize.width)  / 2,
+		resizeTo(backgroundImg, widthOfWindow, backgroundImgRatio * widthOfWindow);
-			($(window).height() - backgroundImgSize.height) / 2);
 		setTimeout(function() {
 			backgroundImg.fadeOut(durationOfFadingOutBackground, afterFadingOutBackground);
@@ -188,7 +200,7 @@
 	// 背景画像フェードアウト終了後に動作
 	function afterFadingOutBackground() {
-		// 最左の画像の位置は、画面より画像幅1つ分左
+		// 最左の画像の横位置は、画面より画像幅1つ分左
 		placeObjects(- widthOfImg, - widthOfLargerImg, true);
 		// 初期状態で非表示だったオブジェクトを表示
@@ -197,7 +209,7 @@
 		menu.show();
 		// 画像およびカーテンのアニメーション設定
-		// 最左の画像の位置は画面と同じ
+		// 最左の画像の横位置は画面と同じ
 		var posX = 0;
 		for (var index = 0; index < imgs.length; index++) {
 			if (! modeIn2Rows) {
@@ -209,7 +221,8 @@
 			else if (! index) {
 				// 2段モード、最初の画像(上段)
 				slideImgIn(imgs[index].parent(), posX);
-				// posX += 0; // カーテンなし
+				// posX += 0;
+				// カーテンなし
 			}
 			else {
 				// 2段モード、2番目以降の画像(下段)
@@ -228,13 +241,13 @@
 		delayBetweenSlides);
 	}
-	/** 画面幅に応じてサイズを(再)計算する
+	/** 画面幅に応じて縦横比を(再)計算する
 	 * @return 正しく計算 true:できた／false:できなかった
 	 */
 	function calcSizes() {
 		var calced = true;
-		if (backgroundImgSize == null) {
+		if (backgroundImgRatio === null) {
 			// まだ取得できていない時のみ取得
 			var width  = backgroundImg.width();
 			var height = backgroundImg.height();
@@ -242,20 +255,20 @@
 				// Safariで画像がまだロードされていない時
 				return false;
 			}
-			backgroundImgSize = { 'width': width, 'height': height };
+			backgroundImgRatio = height / width;
 		}
-		// 画像のもとのサイズを取得
+		// 画像のサイズを取得
-		if (imgSizes.length < imgs.length) {
+		if (imgRatios.length < imgs.length) {
 			// まだ取得できていない時のみ取得
-			$.each(imgs, function(index, curImg) {
+			$.each(imgs, function(index, current) {
-				var width  = curImg.width();
+				var width  = current.width();
-				var height = curImg.height();
+				var height = current.height();
 				if (! width || ! height) {
 					calced = false;
 					return;
 				}
-				imgSizes[index] = height / width;
+				imgRatios[index] = height / width;
 			});
 			if (! calced) {
 				return false;
@@ -265,22 +278,28 @@
 		// テキストのサイズを取得
 		if (textSizes.length < texts.length) {
 			// まだ取得できていない時のみ取得
-			$.each(texts, function(index, curText) {
+			$.each(texts, function(index, current) {
+				textSizes[index] = {
+					'width' : current.width(),
-				textSizes[index] = { 'width': curText.width(), 'height': curText.height() };
+					'height': current.height()
+				};
 			});
 		}
 		widthOfWindow  = $(window).width();
 		modeIn2Rows = (widthOfWindow < discontinuousWidth);
 		widthOfImg = widthOfWindow / (modeIn2Rows ? imgs.length - 1 : imgs.length);
 		widthOfLargerImg = widthOfWindow;
-		heightOfLargerImg = imgSizes[0] * widthOfLargerImg;
+		heightOfLargerImg = imgRatios[0] * widthOfLargerImg;
 		var marginOfMenu = (menu.css('margin-left').replace(/px$/, '')  - 0) +
 		                   (menu.css('margin-right').replace(/px$/, '') - 0);
+		var menuItems = $('.menuItem').size();
 		widthOfMenu = Math.min(maxWidthOfMenu,
-                        widthOfWindow - borderOfMenu * (imgs.length + 1) + marginOfMenu)
+                        widthOfWindow - borderOfMenu * (menuItems + 1) + marginOfMenu)
-		widthOfMenuItem = widthOfMenu / imgs.length - 4;
+		widthOfMenuItem = widthOfMenu / menuItems - 4;
 		return true;
 	}
@@ -328,38 +347,39 @@
 	$(window).on('resize', function() {
 		calcSizes();
 		// 画面幅に合わせて、画像の位置・サイズを再設定する
-		// 最左の画像の位置は、画面と同じ。カーテンはない
+		// 最左の画像の横位置は、画面と同じ。カーテンはない
 		placeObjects(0, 0, false);
 	});
 });
 </script>
 </head>
 <body>
+  <div id="container">
-  <img src="img/Background-Image.jpg" id="backgroundImg">
+    <img src="img/Background-Image.jpg" id="backgroundImg">
-  <div id="container">
-    <div id="imgWrapper1" class="imgWrapper">
+    <div class="imgWrapper" id="imgWrapper1">
-      <img src="img/second/02.jpg" id="img1" class="img">
+      <img src="img/second/02.jpg" class="img" id="img1">
       <div class="textOverImg" id="text1">1枚目</div>
     </div>
-    <div id="curtain1" class="curtain"></div>
+    <div class="curtain" id="curtain1"></div>
-    <div id="imgWrapper2" class="imgWrapper">
+    <div class="imgWrapper" id="imgWrapper2">
-      <img src="img/second/03.jpg" id="img2" class="img">
+      <img src="img/second/03.jpg" class="img" id="img2">
       <div class="textOverImg" id="text2">2枚目 = my tune</div>
     </div>
-    <div id="curtain2" class="curtain"></div>
+    <div class="curtain" id="curtain2"></div>
-    <div id="imgWrapper3" class="imgWrapper">
+    <div class="imgWrapper" id="imgWrapper3">
-      <img src="img/second/04.jpg" id="img3" class="img">
+      <img src="img/second/04.jpg" class="img" id="img3">
       <div class="textOverImg" id="text3">3枚目 - 777<br>2行目</div>
     </div>
-    <div id="curtain3" class="curtain"></div>
+    <div class="curtain" id="curtain3"></div>
   </div>
   <div id="menu">
     <div class="menuItem" id="menuItem1">メニュー1</div>
     <div class="menuItem" id="menuItem2">メニュー2</div>
     <div class="menuItem" id="menuItem3">メニュー3</div>
+    <div class="menuItem" id="menuItem4">メニュー4</div>
   </div>
 </body>
 </html>