이 기사의 예에서는 js를 사용하여 DIV 이동의 키보드 제어를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다. css 스타일 부분: 코드 복사 코드는 다음과 같습니다. <br> html,body{overflow:hidden;}<br> 본문{마진:0;패딩:0;}<br> pre{color:green;padding:10px 15px;배경:#f0f0f0;border:1px 점선 #333;font:12px/1.5 Courier New;margin:12px;}<br> 범위{색상:#999;}<br> #box{위치:절대;상단:50px;왼쪽:300px;너비:100px;높이:100px;배경:빨간색;}<br> </div> <p><strong>js 부분: </strong></p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="46065" class="copybut" id="copybut46065" onclick="doCopy('code46065')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code46065"><script type="text/javascript"> <br> window.onload = 함수()<br> {<br> var oBox = document.getElementById("box");<br> var bLeft = bTop = bRight = bBottom = bCtrlKey = false; <p>setInterval(함수 ()<br> {<br> if(b왼쪽)<br> {<br> oBox.style.left = oBox.offsetLeft - 10 "px"<br> }<br> else if (b오른쪽)<br> {<br> oBox.style.left = oBox.offsetLeft 10 "px"<br> }</p> <p>if(bTop)<br> {<br> oBox.style.top = oBox.offsetTop - 10 "px" <br> }<br> else if(b하단)<br> {<br> oBox.style.top = oBox.offsetTop 10 "px"<br> }<br> //오버플로 방지<br> 제한();<br> },30); </p>document.onkeydown = 함수(이벤트)<p> {<br> var 이벤트 = 이벤트 || window.event;<br> bCtrlKey = event.ctrlKey;<br> </p>스위치(event.keyCode)<p> {<br> 사례 37:<br> b왼쪽 = true;<br> 휴식;<br> 사례 38:<br> if(bCtrl키)<br> {<br> var oldWidth = oBox.offsetWidth;<br> var oldHeight = oBox.offsetHeight;<br> </p>oBox.style.width = oBox.offsetWidth * 1.5 "px";<p> oBox.style.height = oBox.offsetHeight * 1.5 "px" <br> </p>oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 "px";<p> oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 "px";<br> </p>휴식 <p> }<br> bTop = true;<br> 휴식;<br> 사례 39:<br> bRight = true;<br> 휴식;<br> 사례 40:<br> if(bCtrl키)<br> {<br> var oldWidth = oBox.offsetWidth;<br> var oldHeight = oBox.offsetHeight;<br> </p>oBox.style.width = oBox.offsetWidth * 0.75 "px";<p> oBox.style.height = oBox.offsetHeight * 0.75 "px" <br> </p>oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 "px";<p> oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 "px";<br> </p>휴식 <p> }<br> b하단 = true;<br> 휴식;<br> 사례 49:<br> bCtrlKey && (oBox.style.Background = "green");<br> 휴식;<br> 사례 50:<br> bCtrlKey && (oBox.style.Background = "노란색");<br> 휴식;<br> 사례 51:<br> bCtrlKey && (oBox.style.Background = "blue");<br> 휴식;<br> }<br> </p>거짓 반환<p> };<br> </p>document.onkeyup = 함수(이벤트)<p> {<br> 스위치((이벤트 || window.event).keyCode)<br> {<br> 사례 37:<br> b왼쪽 = false;<br> 휴식;<br> 사례 38:<br> bTop = 거짓;<br> 휴식;<br> 사례 39:<br> b오른쪽 = 거짓;<br> 휴식;<br> 사례 40:<br> b하단 = false;<br> 휴식;<br> }<br> };<br> </p>//오버플로 방지<p> 함수 제한()<br> {<br> var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight]<br> //왼쪽 오버플로 방지<br> oBox.offsetLeft <=0 && (oBox.style.left = 0);<br /> //상단 오버플로 방지<br /> oBox.offsetTop <=0 && (oBox.style.top = 0);<br /> //오른쪽 오버플로 방지 <br /> doc[0] - oBox.offsetLeft - oBox.offsetWidth <= 0 && (oBox.style.left = doc[0] - oBox.offsetWidth "px");<br /> //바닥 오버플로 방지<br /> doc[1] - oBox.offsetTop - oBox.offsetHeight <= 0 && (oBox.style.top = doc[1] - oBox.offsetHeight "px")<br /> }<br /> };<br /> </script><br /></div> </p><p>지침: <strong></strong> </p>위: ↑ 아래: ↓ 왼쪽: ← 오른쪽: →<p> Ctrl 1 : 배경이 녹색으로 변합니다 <br /> Ctrl 2 : 배경이 노란색으로 변합니다<br /> Ctrl 3 : 배경이 파란색으로 변합니다 <br /> Ctrl ↑ : 확대 <br /> Ctrl ↓ : 축소 <br /> </p><p>html 부분: <strong> <br /></strong><div class="codetitle"><span><a style="CURSOR: pointer" data="24039" class="copybut" id="copybut24039" onclick="doCopy('code24039')">코드 복사<U></U></a> 코드는 다음과 같습니다.</span></div>이동된 블록[DIV]<div class="codebody" id="code24039"> <div id="box"></div><br></p> </div> 이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다. <p></p>
