<javascript />
const image = document.getElementById('container-img');
const container = document.getElementById('img-container');
let moving = false;
let control = true;
let clickpos = 0;
let direction = 0; // -1: left, 1: right
//let direction_Y = 0; // -1: bottom, 1: top
let container_width = container.clientWidth
let container_height = container.clientHeight
//이미지 스케일변경
var scaleFactor = 3;
var currentWidth = image.clientWidth;
var newWidth = currentWidth * scaleFactor;
image.style.width = newWidth + 'px';
//log
console.log("img size = " + image.clientWidth + "px, " + image.clientHeight + "px");
image.addEventListener('mousedown', (e) => {
moving = true;
direction = e.clientX < container.getBoundingClientRect().left + (container.clientWidth / 2) ? -1 : 1;
//direction_Y = e.clientY < container.getBoundingClientRect().TOP + (container.clientHeight / 2) ? 1 : -1;
//log
//console.log('num_X = ' + direction_X + 'num_Y = ' + direction_Y);
console.log("x=" + e.clientX + "y=" + e.clientY);
});
document.addEventListener('mouseup', () => {
moving = false;
});
function moveImage() {
if (moving) {
//변수
let imgwidth = (image.offsetLeft + direction * 5);
let imgheight = (image.offsetTop + direction * 5);
//제어
if (imgwidth > 0 || imgheight > 0 || imgwidth < (image.clientWidth - container_width) * -1 || imgheight < (image.clientHeight - container_height) * -1) {
control = false;
}
else {
control = true;
}
//실행
if (control) {
image.style.left = imgwidth + 'px';
image.style.top = imgheight + 'px';
}
//log
console.log(control + image.style.left + image.style.top);
}
requestAnimationFrame(moveImage);
}
requestAnimationFrame(moveImage);
<css />
#img-container {
position: relative;
border: 1px solid black;
width: 1020px;
height: 580px;
overflow: hidden;
/*pointer-events: none;*/
pointer-events: visiblePainted;
}
#container-img {
position: absolute;
top: 0;
left: 0;
cursor: move;
}
<html />
<!DOCTYPE html>
<html>
<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>Image Drag Example</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="img-container">
<img id="container-img" src="img/test3d.png" />
</div>
<script src="js/script.js"></script>
</body>
</html>'JavaScript' 카테고리의 다른 글
| [js] img animation(3) - 방향키 복합이동, 대각선 45도, 제어o (0) | 2023.05.02 |
|---|---|
| [js] img animation(2) - 방향키 단순이동, 제어x (0) | 2023.05.02 |
