javascript_javascript 기술 하에서 키보드를 사용하여 레이어 이동을 제어하는 코드

键盘控制层的移动 #Div { position:absolute; width:238px; height:135px; left:expression((body.clientWidth - this.offsetWidth)/2); top:expression((body.clientHeight - this.offsetHeight)/2); z-index:1; text-align:center; background:#AFDBFF; border:#006699 1px solid; } #Txt{ font-size:9pt; position:absolute; width:200px; top:expression((Div.offsetHeight - this.offsetHeight)/2); left:expression((Div.offsetWidth - this.offsetWidth)/2); } #Txt p{ font-size:9pt; margin:8px; } #Txt font{ color:#FF0000; font-size:9pt; } #Layer1 { border:#006699 1px solid; padding:10px; font-size:9pt; color:#336699; position:absolute; top:expression((body.clientHeight - this.offsetHeight)/2); left:expression((body.clientWidth - this.offsetWidth)/2 + Div.offsetWidth); } #Layer1 Input { font-size:9pt; color:#336699; } #Int { text-align:right; } --> 请分别按下 ↑ 、 ↓ 、 ← 、 → ，

试试看有什么效果？

컨트롤 키 설정:

위로 이동:

아래로 이동: >왼쪽으로 이동:

오른쪽으로 이동:

각 이동 px; //alert(txt.style.top); var up,down,left,right; up = 38; down = 40 ; left = 37; right = 39; function document.onkeydown() { // Alert(event.keyCode)//left ：37 38 오른쪽: 39 아래쪽: 40 var int; int =parseInt(document.getElementById("Int").value) if(int == "NaN") int = 5 ; var str = "",press,evet; var div = document.getElementById("Div") var txt = document.getElementById("Txt"); .srcElement.tagName == "INPUT") { if(event.srcElement == document.getElementById("Int")) { if(event.keyCode = = 13) document.body.focus(); if((event.keyCode 105) && event.keyCode != 8 && event.keyCode != 46 && !(event. keyCode >= 37 && event.keyCode event.returnValue = false return } else { 스위치( event.keyCode) { 사례 37:{ event.srcElement.value = "←"; break; } 사례 38:{ event.srcElement .value = " ↑"; break; } 케이스 39:{ event.srcElement.value = "→"; break; } 케이스 40:{ event.srcElement.value = "↓"; break; } } 스위치(event.srcElement) { 케이스 document.getElementById(" Up"): { up = event.keyCode; break; } 케이스 document.getElementById("Down"):{ down = event.keyCode } case document.getElementById("Left"):{ left = event.keyCode; break; } case document.getElementById("Right"): { right = event.keyCode; break } } } } else { 스위치(event.keyCode) { 케이스 왼쪽:{ press = " ← "; evet = " 왼쪽 &lt ;/font>로 이동" " " int " px. "; div.style.left = (parseInt(div.currentStyle.left) - int) "px"; if(parseInt(div.style.left) { evet = " 맨 왼쪽 에 도달했으며 더 이상 왼쪽 으로 이동할 수 없습니다."; div.style.left = "0px"; break ; } break; } 케이스 업:{ press = " ↑ "; evet = " 이동 " up " " " int " px. "; div.style.top = (parseInt(div.currentStyle.top) - int) "px"; if(parseInt(div.style.top) { evet = " 상단 에 도달했으며 위로 이동할 수 없습니다. "; div.style.top = "0px"; break; } break; } 대소문자 오른쪽:{ press = " → "; evet = " 이동 "을 오른쪽 " " " int " px . "; div.style.left = (parseInt(div.currentStyle.left) int) "px"; if(parseInt(div.style.left) >= (parseInt(document.body.clientWidth) ) -parseInt(div.offsetWidth))) { div.style.left =parseInt(document.body.clientWidth) -parseInt(div.offsetWidth) evet = "이미 도착했습니다 오른쪽으로 이동할 수 없습니다. "; break; } break; } 케이스 다운:{ press = " ↓ "; evet = " 이동 아래 " " " int " px. "; div.style.top = (parseInt(div.currentStyle.top) int) "px"; if(parseInt(div.style.top) >= (parseInt(document.body.clientHeight) ) -parseInt(div.offsetHeight))) { div.style.top =parseInt(document.body.clientHeight) -parseInt(div.offsetHeight) evet = "이미 도착했습니다 은 아래로 이동할 수 없습니다. "; break; } break; } 기본값: { return; } } str = " "press" 키를 눌렀습니다.

"; str = " 이 레이어" evet; txt.innerHTML = str; } } //-->

javascript_javascript 기술 하에서 키보드를 사용하여 레이어 이동을 제어하는 ​​코드

관련 기사

javascript_javascript 기술 하에서 키보드를 사용하여 레이어 이동을 제어하는 코드