<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
#box {
/* background-image: url(images/corner.png); */
background-repeat: no-repeat;
background-position: 99% 99%;
}
</style>
</head>
<body>
<!-- 박스 안움직임. 다시보기 코드 다시 달라하기. 보류 -->
<h1>test</h1>
<div id="box" class="box bg-yellow" style="width: 200px; height: 200px;"></div>
<hr>
<textarea rows="5"></textarea>
<script>
const box = document.getElementById('box');
let isDown = false;
box.onmouseout = function() {
event.target.style.backgroundImage = 'url()';
event.target.style.cursor = 'default';
window.onmousedown = null;
};
box.onmousemove = function() {
if ((event.offsetX >= parseInt(event.target.style.width) - 20) && (event.offsetY >= parseInt(event.target.style.height) -20)) {
// event.target.style.backgroundColor = 'tomato';
event.target.style.backgroundImage = 'url(images/corner.png)';
event.target.style.cursor = 'nw-resize';
window.onmousedown = function() {
if (event.target.id == 'box') {
isDown = true;
}
};
} else {
event.target.style.backgroundImage = 'url()';
event.target.style.cursor = 'default';
window.onmousedown = null;
}
};
window.onmousedown = function() {
if (event.target.id == 'box') {
isDown = true;
}
};
window.onmousemove = function() {
if (isDown) {
box.style.width = event.clientX + 'px';
box.style.height = event.clientY + 'px';
}
};
window.onmouseup = function() {
isDown = false;
};
</script>
</body>
</html>
'[HTML | CSS | JavaScript | jQuery] 정리 > JavaScript' 카테고리의 다른 글
| JavaScript - CSS 상자 돌리기(rotate) (0) | 2023.05.08 |
|---|---|
| JavaScript - CSS element(s)FromPoint() (0) | 2023.05.08 |
| JavaScript - CSS 드래그 (0) | 2023.05.08 |
| JavaScript - CSS 드래그해서 옮기기 (0) | 2023.05.07 |
| JavaScript - CSS 좌표값(offsetX / Y) (0) | 2023.05.07 |