๐ป๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์กฐ์๐ป
์คํธ๋ผ์ดํธ ์ด๋ฏธ์ง ํ์ฉํ๋ค.
์คํ๋ผ์ดํธ ์ด๋ฏธ์ง๋ ์ฌ๋ฌ ๊ฐ์ ์ด๋ฏธ์ง๋ฅผ ํ๋์ ์ด๋ฏธ์ง๋ก ํฉ์ณ์ ๊ด๋ฆฌํ๋ ๊ฒ์ผ๋ก ์ฐ์๋ ์ด๋ฏธ์ง๊ฐ ํ๋์ ์ด๋ฏธ๋ก ํฉ์ณ์ ธ ์๋ค๋ฉด backgroundPosition์ ์ด๋์์ผ ์์ง์ด๋ ๊ฒ ๊ฐ์ ํจ๊ณผ๋ฅผ ๋ณด์ฌ์ค๋ค.
๐ปheart๐ป
'๋๊ทผ๋๊ทผ' ๋ฒํผ์ ๋๋ฅด๋ฉด backgroundPosition์ ์ด๋์ํจ๋ค.
๊ธฐ๋ณธ ๋ผ๋
<!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>
#heart {
border: 1px solid black;
width: 300px;
height: 300px;
background-image: url(../asset/images/heart.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์กฐ์</h1>
<div id="heart"></div>
<hr>
<input type="button" value="๋๊ทผ๋๊ทผ" id="btn1">
</body>
</html>
์ด๋ฒคํธ
<script>
let x =0;
document.getElementById('btn1').onclick = function() {
x -= 300;
if (x < -600) {
x=0;
}
document.getElementById('heart').style.backgroundPosition = x + 'px 0px';
}
</script>
์๋ณธ์ด๋ฏธ์ง์์ ํ๋์ ํํธ๋ง ๋ณด์ด๊ฒ ๋๋น ์ง์ ์ ํ๋ค.
๋ฒํผ์ ๋๋ฅผ ๋๋ง๋ค x์ ์์น๋ฅผ ๊ฐ์์์ผ ์ด๋ฏธ์ง๋ฅผ ์ผ์ชฝ์ผ๋ก ์ด๋์ํจ๋ค.
๋ณด์ด๋ ์์ญ์ ๊ณ ์ ์ด๊ณ ์ฐ์๋ ์ด๋ฏธ์ง๊ฐ ์ผ์ชฝ์ผ๋ก ์์ง์ด๋ฉด์ ์ ๋๋ฉ์ด์ ๊ณผ ๊ฐ์ ํจ๊ณผ๋ฅผ ๋ณด์ฌ์ค๋ค.
๐ปpuma๐ป
์ฌ์ง์ ํด๋ฆญํ๋ฉด ์คํ๋ผ์ดํธ ์ด๋ฏธ์ง์ ์์น๊ฐ์ด ๋ณํ๋ค.
ํ ๋ฒ ๋ ํด๋ฆญํ๋ฉด ์์น์ด๋์ ๋ฉ์ถ๋ค.
๊ธฐ๋ณธ ๋ผ๋
<!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>
#puma {
border: 1px solid black;
width: 512px;
height: 256px;
background-image: url(../asset/images/puma.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="puma"></div>
</body>
</html>
์ด๋ฒคํธ
<script>
const puma = document.getElementById('puma');
x = 0;
let y = 0;
let timer = 0;
puma.onmousedown = function() {
//๋ฉ์ถฐ์๋ ์ํ
if (timer == 0){
timer = setInterval(function() {
x-= 512;
if (x < -(512 * 3)) {
x = 0;
y -= 256; //์ด๋ฏธ์ง ์ฌ๋ฆฌ๊ธฐ
if (y < -256) {
y = 0;
}
}
puma.style.backgroundPosition = `${x}px ${y}px`;
},100);
} else {
clearInterval(timer);
timer =0;
}
};
</script>
'WEB > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JavaScript] ์์ฑ์ ํจ์ (0) | 2023.10.13 |
|---|---|
| [JavaScript] ์คํฌ๋กค ์ด๋ฒคํธ : ๋ฐฐ๊ฒฝ์, ๊ธ์จ์ ๋ณ๊ฒฝ (0) | 2023.10.12 |
| [JavaScript] change ์ด๋ฒคํธ : ์ฌ์ง ์ฌ๋ผ์ด๋ (0) | 2023.10.12 |
| [JavaScript] ํด๋ฆญ ์ด๋ฒคํธ : ๋ฐ์ํ ๋ฉ๋ด๋ฐ ๋ง๋ค๊ธฐ (0) | 2023.10.12 |
| [JavaScript] CSS ์กฐ์ - transition ์ถ๊ฐ (0) | 2023.10.12 |
