【マウスオーバー】画像のランダム表示と画像の表示領域拡大

ブロック要素にランダムで画像を表示、マウスオーバーで画像の表示領域を拡大します。また、ブロック要素には表示画像ごとにリンクを設定します。

htmlのコードは下記になります。
画像は背景画像で表示させるため空のdivタグを用意し、class=”hover_image”を付与します。

<div class="hover_image_wrap">
	<div class="hover_image"></div>
	<div class="hover_image"></div>
	<div class="hover_image"></div>
	<div class="hover_image"></div>
</div>

続いてCSSのコードです。
class=”hover_image”を付与した空のdivタグはFlexboxで横並びにします。横に4つ並べているのでwidth: 25%;で均等幅にします。そして背景画像表示用にbackground-position: center center;とbackground-size: cover;を指定します。マウスオーバー時はwidth: 50%;を指定し画像の表示領域を拡大します。また表示領域の拡大がスムーズな動きになるようにtransition: 0.3s;を指定します。
クラス名background1~background7にはbackground-imageで背景画像のファイル名をそれぞれ指定します。このクラス名は空のdivタグに付与しますが、ページ表示時にjQueryで動的に付与するためhtmlには記述していません。

.hover_image_wrap {
	display: flex;
	justify-content: space-between;
	max-width: 630px;
	height: 500px;
	margin: 0 auto;
}
.hover_image {
	width: 25%;
	transition: 0.3s;
	background-position: center center;
	background-size: cover;
}
.hover_image:hover {
	width: 50%;
	cursor: pointer;
}
.background1 {
	background-image: url(image01.jpg);
}
.background2 {
	background-image: url(image02.jpg);
}
.background3 {
	background-image: url(image03.jpg);
}
.background4 {
	background-image: url(image04.jpg);
}
.background5 {
	background-image: url(image05.jpg);
}
.background6 {
	background-image: url(image06.jpg);
}
.background7 {
	background-image: url(image07.jpg);
}

最後にjQueryのコードです。
ランダムで表示する画像は7ファイルあります。まずMath.floor(Math.random()*arr0.length)で0~6までの乱数を生成します。Math.floorは小数点以下の切り捨てです。次にspliceを利用して配列arr0内から乱数番目の数字を1つ削除し、arr1に代入します。そして”background”の文字列にこのarr1を結合してbackground1~background7のクラス名をランダムで作成し、空のdivタグに付与します。これを空のdivタグの数だけ繰り返します。配列arr0内の残っている数字から1つづつ削除して代入していくので、background1~background7のクラス名が重複することはありません。

$(function() {
	var arr0 = [1,2,3,4,5,6,7];
	var arr1 = [];
	var techUrl = ["https://tech.brick-plan.jp/",
		       "https://tech.brick-plan.jp/category/accordion/",
		       "https://tech.brick-plan.jp/category/tab/",
		       "https://tech.brick-plan.jp/category/fade/",
		       "https://tech.brick-plan.jp/category/hover/",
		       "https://tech.brick-plan.jp/category/modal/",
		       "https://tech.brick-plan.jp/category/responsive/"];
	$(".hover_image").each(function() {
		var arr1 = arr0.splice(Math.floor(Math.random()*arr0.length),1)[0];
		$(this).addClass("background" + arr1);
	});
	$(".hover_image").click(function() {
		if ($(this).hasClass("background1")) {
			window.location.href = techUrl[0];
		} else if ($(this).hasClass("background2")) {
			window.location.href = techUrl[1];
		} else if ($(this).hasClass("background3")) {
			window.location.href = techUrl[2];
		} else if ($(this).hasClass("background4")) {
			window.location.href = techUrl[3];
		} else if ($(this).hasClass("background5")) {
			window.location.href = techUrl[4];
		} else if ($(this).hasClass("background6")) {
			window.location.href = techUrl[5];
		} else if ($(this).hasClass("background7")) {
			window.location.href = techUrl[6];
		}
	});
});
タイトルとURLをコピーしました