공부하는 Nar
[js] img animation(3) - 방향키 복합이동, 대각선 45도, 제어o
JavaScript 2023. 5. 2. 17:56

const image = document.getElementById('container-img'); const container = document.getElementById('img-container'); let moveInterval; let keysPressed = {}; //이미지 스케일변경 var scaleFactor = 3; var currentWidth = image.clientWidth; var newWidth = currentWidth * scaleFactor; image.style.width = newWidth + 'px'; //실행함수 function moveImage() { let xPos = image.offsetLeft; let yPos = image.offsetTop; let ..

[js] img animation(2) - 방향키 단순이동, 제어x
JavaScript 2023. 5. 2. 13:35

const image = document.getElementById('container-img'); let moveInterval; //이미지 스케일변경 var scaleFactor = 3; var currentWidth = image.clientWidth; var newWidth = currentWidth * scaleFactor; image.style.width = newWidth + 'px'; //실행함수 document.addEventListener('keydown', function (event) { clearInterval(moveInterval); // 기존의 인터벌을 정지 moveInterval = setInterval(() => { let xPos = image.offsetLeft; le..

[js] img animation(1) - 대각선 이동
JavaScript 2023. 5. 2. 09:59

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 currentWidt..