DIV movement_javascript 기술의 키보드 제어를 구현하는 js 메소드

이 기사의 예에서는 js를 사용하여 DIV 이동의 키보드 제어를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

css 스타일 부분:

코드 복사 코드는 다음과 같습니다. html,body{overflow:hidden;} 본문{마진:0;패딩:0;} pre{color:green;padding:10px 15px;배경:#f0f0f0;border:1px 점선 #333;font:12px/1.5 Courier New;margin:12px;} 범위{색상:#999;} #box{위치:절대;상단:50px;왼쪽:300px;너비:100px;높이:100px;배경:빨간색;} js 부분:

코드 복사 코드는 다음과 같습니다. window.onload = 함수() { var oBox = document.getElementById("box"); var bLeft = bTop = bRight = bBottom = bCtrlKey = false; setInterval(함수 () { if(b왼쪽) { oBox.style.left = oBox.offsetLeft - 10 "px" } else if (b오른쪽) { oBox.style.left = oBox.offsetLeft 10 "px" }

if(bTop) { oBox.style.top = oBox.offsetTop - 10 "px" } else if(b하단) { oBox.style.top = oBox.offsetTop 10 "px" } //오버플로 방지 제한(); },30);

document.onkeydown = 함수(이벤트) { var 이벤트 = 이벤트 || window.event; bCtrlKey = event.ctrlKey;

스위치(event.keyCode) { 사례 37: b왼쪽 = true; 휴식; 사례 38: if(bCtrl키) { var oldWidth = oBox.offsetWidth; var oldHeight = oBox.offsetHeight;

oBox.style.width = oBox.offsetWidth * 1.5 "px"; oBox.style.height = oBox.offsetHeight * 1.5 "px"

oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 "px"; oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 "px";

휴식 } bTop = true; 휴식; 사례 39: bRight = true; 휴식; 사례 40: if(bCtrl키) { var oldWidth = oBox.offsetWidth; var oldHeight = oBox.offsetHeight;

oBox.style.width = oBox.offsetWidth * 0.75 "px"; oBox.style.height = oBox.offsetHeight * 0.75 "px"

oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 "px"; oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 "px";

휴식 } b하단 = true; 휴식; 사례 49: bCtrlKey && (oBox.style.Background = "green"); 휴식; 사례 50: bCtrlKey && (oBox.style.Background = "노란색"); 휴식; 사례 51: bCtrlKey && (oBox.style.Background = "blue"); 휴식; }

거짓 반환 };

document.onkeyup = 함수(이벤트) { 스위치((이벤트 || window.event).keyCode) { 사례 37: b왼쪽 = false; 휴식; 사례 38: bTop = 거짓; 휴식; 사례 39: b오른쪽 = 거짓; 휴식; 사례 40: b하단 = false; 휴식; } };

//오버플로 방지 함수 제한() { var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight] //왼쪽 오버플로 방지 oBox.offsetLeft //상단 오버플로 방지 oBox.offsetTop //오른쪽 오버플로 방지 doc[0] - oBox.offsetLeft - oBox.offsetWidth //바닥 오버플로 방지 doc[1] - oBox.offsetTop - oBox.offsetHeight } };

지침:

위: ↑ 아래: ↓ 왼쪽: ← 오른쪽: → Ctrl 1 : 배경이 녹색으로 변합니다 Ctrl 2 : 배경이 노란색으로 변합니다 Ctrl 3 : 배경이 파란색으로 변합니다 Ctrl ↑ : 확대 Ctrl ↓ : 축소

html 부분: 코드 복사 코드는 다음과 같습니다. 이동된 블록[DIV]

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.