はじめに
こんにちは！@70days_jsです。
mouseoverで画像が少しずつ現れるサイトを作りました。(gif)↓
今日は72日目。(2019/12/29)
よろしくお願いします。
サイトURL
やったこと
mouseoverで画像が少しずつ現れるものを作りました。
今回JavaScriptとcssで作ったので、htmlは何も書いていません。
html↓
<body></body>
cssではあらかじめ画像を表示したり、スタイルを用意しています。
css↓
body {
width: 100vw;
height: 100vh;
overflow: hidden;
margin: 0;
background-image: url("day31_image/4.jpg");
background-size: cover;
}
.oneBlock {
background-color: white;
position: absolute;
border-right: solid 2px black;
border-bottom: solid 2px black;
display: flex;
justify-content: center;
align-items: center;
}
JavaScript↓
let bodyWidth = window.innerWidth,
bodyHeight = window.innerHeight,
oneBlockWidth = bodyWidth / 10,
oneBlockHeight = bodyHeight / 10,
oneBlockList = [];
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
let div = document.createElement("div");
div.classList.add("oneBlock");
div.style.width = oneBlockWidth - 1 + "px";
div.style.height = oneBlockHeight - 1 + "px";
div.style.top = oneBlockHeight * i + "px";
div.style.left = oneBlockWidth * j + "px";
let number = i * 10 + (j + 1);
div.setAttribute("id", number);
div.innerHTML = number;
oneBlockList.push(div);
document.body.appendChild(div);
}
}
for (var i = 0; i < oneBlockList.length; i++) {
let oneBlock = oneBlockList[i];
oneBlock.addEventListener("mouseover", function() {
oneBlock.style.backgroundColor = "rgba(0,0,0,0)";
oneBlock.innerHTML = "";
});
}
まず1~100のblockはdivで出来ていますが、これはfor文のネストで作っています。↓
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
...
}
}
この段階で全てのdivのスタイル・idを設定し、全てのdivを1つの配列に格納しています。
oneBlockList.push(div);
その後、配列をfor文で回してイベントリスナーをつけています。↓
for (var i = 0; i < oneBlockList.length; i++) {
...
oneBlock.addEventListener("mouseover", function() {
...
}
}
わざわざ配列に入れずに初めのfor文に書いてもいいのですが、長くなりすぎるのを懸念して分けて書きました。
そう考えると、スタイルの付与等も役割別で分けてもよかったかもしれません。
感想
残りあと2日。頑張ろう
最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。