回答編集履歴

jQuery3\.1\.1対応。

2017/02/26 03:36

投稿

naomi3

スコア1105

test CHANGED Viewed

@@ -14,6 +14,14 @@
 これでどうですか？
+修正
+jQueryのバージョンによるものでした。3.1.1に対応しました。
 ```HTML
 <!DOCTYPE html>
@@ -138,7 +146,7 @@
 </style>
-<script src="jquery-2.1.4.js"></script>
+<script src="jquery-3.1.1.min.js"></script>
 <script>
@@ -258,7 +266,7 @@
 	// IEでは、ここでアニメーションが正しく動作する
-	inititialize();
+	initialize();
@@ -266,7 +274,7 @@
 	// Safariでは、ここで正しく画像の縦横比を取得できる
-	$(window).on('load', inititialize);
+	$(window).on('load', initialize);
@@ -376,7 +384,7 @@
-	function inititialize() {
+	function initialize() {
 		if (initialized || ! calcSizes()) {
@@ -604,7 +612,7 @@
 		                   (menu.css('margin-right').replace(/px$/, '') - 0);
-		var menuItems = $('.menuItem').size();
+		var menuItems = $('.menuItem').length;
 		widthOfMenu = Math.min(maxWidthOfMenu,

軽微なバグ修正

2017/02/26 03:36

投稿

naomi3

スコア1105

test CHANGED Viewed

@@ -4,6 +4,16 @@
 背景画像を画面いっぱい(縦横比はそのまま)に、メニューのバグを直しました。
+修正
+バグを修正しました。
+これでどうですか？
 ```HTML
 <!DOCTYPE html>
@@ -124,7 +134,7 @@
   border-right: solid 1px;
-} */
+}
 </style>

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

2017/02/21 15:14

投稿

naomi3

スコア1105

test CHANGED Viewed

@@ -1,3 +1,9 @@
+修正
+背景画像を画面いっぱい(縦横比はそのまま)に、メニューのバグを直しました。
 ```HTML
 <!DOCTYPE html>
@@ -24,7 +30,7 @@
   position: relative;
-  margin-top : -8px; /* 上に余白を作らない */
+  margin-top:  -8px; /* 上に余白を作らない */
   margin-left: -8px; /* 左に余白を作らない */
@@ -36,7 +42,7 @@
 }
-.imgWrapper /* 1枚の画像、テキストをのせたコンテナ */ {
+.imgWrapper /* 1枚の画像とテキストをのせたコンテナ */ {
   position: absolute;
@@ -68,7 +74,7 @@
   position: absolute;
-  width : 180px;
+  width:  180px;
   height:  30px;
@@ -90,7 +96,7 @@
   overflow: hidden;
-  margin-left : -4px;
+  margin-left:  -4px;
   margin-right: -4px;
@@ -108,13 +114,17 @@
 }
-#menuItem1, #menuItem3 /* ボーダーが2重になるので、#menuItem2は設定しない */ {
+.menuItem {
-  border-left : solid 1px;
+  border-left:  solid 1px;
+}
+#menu :last-child {
   border-right: solid 1px;
-}
+} */
 </style>
@@ -140,13 +150,17 @@
 	var durationOfSlide =  800; // ミリ秒
 	// 背景画像
 	var backgroundImg = $('#backgroundImg');
-	// 背景画像のサイズ(幅、高さ)
+	// 背景画像の縦横比
-	var backgroundImgSize = null; // 未設定
+	var backgroundImgRatio = null; // 未設定
 	// 画面幅がこの値より狭くなると2段モード
@@ -160,13 +174,17 @@
 	var modeIn2Rows;
 	// スライドインする画像(左から)
 	var imgs = [ $('#img1'), $('#img2'), $('#img3') ];
-	// 画像のもとのサイズ(縦横比)(左から)
+	// 画像の縦横比(左から)
-	var imgSizes = []; // 未設定
+	var imgRatios = []; // 未設定
 	// 画像の実際の幅
@@ -176,6 +194,8 @@
 	var widthOfLargerImg, heightOfLargerImg;
 	// 画像にのせるテキストのコンテナ(左から)
 	var texts = [ $('#text1'), $('#text2'), $('#text3') ];
@@ -184,10 +204,14 @@
 	var textSizes = []; // 未設定
 	// 画像を隠すカーテン(左から)
 	var curtains = [ $('#curtain1'), $('#curtain2'), $('#curtain3') ];
 	// メニュー
 	var menu = $('#menu');
@@ -212,6 +236,8 @@
 	var widthOfMenuItem;
 	// 初期処理が正しくできたか否か
 	var initialized = false;
@@ -228,7 +254,7 @@
 	// 画像の読み込みが完了後に動作
-	// Safariでは、ここで正しく画像のサイズを取得できる
+	// Safariでは、ここで正しく画像の縦横比を取得できる
 	$(window).on('load', inititialize);
@@ -262,7 +288,7 @@
 				var posY = (modeIn2Rows ? heightOfLargerImg : 0);
-				var heightOfImg = imgSizes[index] * widthOfImg;
+				var heightOfImg = imgRatios[index] * widthOfImg;
 				maxHeightOfImg = Math.max(maxHeightOfImg, heightOfImg);
@@ -318,7 +344,9 @@
 					(heightOfLargerImg - textSizes[index].height) / 2);
-				// posX += 0; // カーテンなし
+				// posX += 0;
+				// カーテンなし
 			}
@@ -350,11 +378,7 @@
-		moveTo(backgroundImg,
-			(widthOfWindow  - backgroundImgSize.width)  / 2,
+		resizeTo(backgroundImg, widthOfWindow, backgroundImgRatio * widthOfWindow);
-			($(window).height() - backgroundImgSize.height) / 2);
@@ -378,7 +402,7 @@
 	function afterFadingOutBackground() {
-		// 最左の画像の位置は、画面より画像幅1つ分左
+		// 最左の画像の横位置は、画面より画像幅1つ分左
 		placeObjects(- widthOfImg, - widthOfLargerImg, true);
@@ -396,7 +420,7 @@
 		// 画像およびカーテンのアニメーション設定
-		// 最左の画像の位置は画面と同じ
+		// 最左の画像の横位置は画面と同じ
 		var posX = 0;
@@ -420,7 +444,9 @@
 				slideImgIn(imgs[index].parent(), posX);
-				// posX += 0; // カーテンなし
+				// posX += 0;
+				// カーテンなし
 			}
@@ -458,7 +484,7 @@
-	/** 画面幅に応じてサイズを(再)計算する
+	/** 画面幅に応じて縦横比を(再)計算する
 	 * @return 正しく計算 true:できた／false:できなかった
@@ -470,7 +496,7 @@
-		if (backgroundImgSize == null) {
+		if (backgroundImgRatio === null) {
 			// まだ取得できていない時のみ取得
@@ -486,23 +512,23 @@
 			}
-			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) {
@@ -512,7 +538,7 @@
 				}
-				imgSizes[index] = height / width;
+				imgRatios[index] = height / width;
 			});
@@ -532,9 +558,15 @@
 			// まだ取得できていない時のみ取得
-			$.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()
+				};
 			});
@@ -546,11 +578,15 @@
 		modeIn2Rows = (widthOfWindow < discontinuousWidth);
 		widthOfImg = widthOfWindow / (modeIn2Rows ? imgs.length - 1 : imgs.length);
 		widthOfLargerImg = widthOfWindow;
-		heightOfLargerImg = imgSizes[0] * widthOfLargerImg;
+		heightOfLargerImg = imgRatios[0] * widthOfLargerImg;
@@ -558,11 +594,13 @@
 		                   (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;
@@ -658,7 +696,7 @@
 		// 画面幅に合わせて、画像の位置・サイズを再設定する
-		// 最左の画像の位置は、画面と同じ。カーテンはない
+		// 最左の画像の横位置は、画面と同じ。カーテンはない
 		placeObjects(0, 0, false);
@@ -672,45 +710,45 @@
 <body>
-  <img src="img/Background-Image.jpg" id="backgroundImg">
   <div id="container">
+    <img src="img/Background-Image.jpg" id="backgroundImg">
-    <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>
@@ -722,6 +760,8 @@
     <div class="menuItem" id="menuItem3">メニュー3</div>
+    <div class="menuItem" id="menuItem4">メニュー4</div>
   </div>
 </body>