๐ป๋ฐ์ํ ๋ฉ๋ด๋ฐ ๋ง๋ค๊ธฐ๐ป
๋ฉ๋ด๋ฅผ ํ๋ ํด๋ฆญํ๋ฉด ํ์ด๋์ค๋ ์ ๋๋ฉ์ด์ ๊ณผ ์์น์ด๋์ ํ๋ค.
๋ค๋ฅธ ๋ฉ๋ด๋ฅผ ํด๋ฆญํ๋ฉด ์๋ ๋ฉ๋ด๋ ์์์น๋ก ๋ค์ด๊ฐ๊ณ ํด๋ฆญํ ๋ฉ๋ด๊ฐ ํ์ด๋์จ๋ค.
๊ฐ์ ๋ฉ๋ด๋ฅผ ํด๋ฆญํ๋ฉด ์์์น๋ก ๋์๊ฐ๋ค.
๊ธฐ๋ณธ ๋ผ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#menu {
display: flex;
width: 630px;
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
transform: translate(0px, -100px);
}
#menu img {
transition: all .5s;
}
</style>
</head>
<body>
<nav id="menu">
<img src="../asset/images/rect_icon01.png">
<img src="../asset/images/rect_icon02.png">
<img src="../asset/images/rect_icon03.png">
<img src="../asset/images/rect_icon04.png">
<img src="../asset/images/rect_icon05.png">
</nav>
</body>
</html>
์ด๋ฒคํธ
<script>
const item = document.querySelectorAll('#menu > img');
let olditem = null;
for (let i=0; i<item.length; i++) {
item[i].onclick = function() {
//img๊ฐ ํ๋ ๋ด๋ ค์์์ ๋ ์์์น๋ก ๋๋๋ฆฌ๊ธฐ
if (olditem != null) {
olditem.style.transform = 'translate(0px, 0px)';
}
//์ ํํ ์ด๋ฏธ์ง์ ๊ธฐ์กด ์ด๋ฏธ์ง๊ฐ ๋ค๋ฅธ ๊ฒฝ์ฐ
if (event.target != olditem) {
event.target.style.transform = 'translate(0px, 90px)';
olditem = event.target;
} else {
//์ ํํ ์ด๋ฏธ์ง์ ๊ธฐ์กด ์ด๋ฏธ์ง๊ฐ ๊ฐ์ ๊ฒฝ์ฐ, ๊ธฐ์กด ์ด๋ฏธ์ง๋ฅผ ์์์น๋ก ๋๋๋ฆฐ๋ค.
event.target.style.transform = 'translate(0px, 0px)';
olditem = null;
}
};
}
</script>olditem ์ด๋ผ๋ ๋ณ์์ ์ด์ ํด๋ฆญํ ๋ฉ๋ด ๊ฐ์ฒด๋ฅผ ๋ด์ ํ์ฌ์ ๊ฐ์ผ๋ฉด ์์์น๋ก ๋์๊ฐ๊ณ ๋ค๋ฅธ ๋ฉ๋ด์ด๋ฉด olditem๋ฅผ ์์์น์ํค๊ณ ํด๋ฆญํ ๋ฉ๋ด๋ฅผ ์์น์ด๋ ์ํจ๋ค.
'WEB > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JavaScript] tansition ์กฐ์ : ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์กฐ์ (0) | 2023.10.12 |
|---|---|
| [JavaScript] change ์ด๋ฒคํธ : ์ฌ์ง ์ฌ๋ผ์ด๋ (0) | 2023.10.12 |
| [JavaScript] CSS ์กฐ์ - transition ์ถ๊ฐ (0) | 2023.10.12 |
| [JavaScript] ๋๋๊ทธ์ค๋๋กญ ์ด๋ฒคํธ : ๋ฐ์ค ์ฌ์ด์ฆ ์กฐ์ ํ๊ธฐ (0) | 2023.10.12 |
| [JavaScript] ๋๋๊ทธ์ฑ๋๋กญ ์ด๋ฒคํธ : ์์ ์ฌ๋ฌ๊ฐ Drag & Drop (0) | 2023.10.12 |
