この記事の例では、JS を使用して DIV 移動のキーボード制御を実装する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。 CSS スタイル部分: コードをコピー コードは次のとおりです。 <br> html,body{overflow:hidden;}<br> 本文{マージン:0;パディング:0;}<br> pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;margin:12px;}<br> スパン{color:#999;}<br> #box{位置:絶対;上:50px;左:300px;幅:100px;高さ:100px;背景:赤;}<br> js 部分: コードをコピー コードは次のとおりです。 <br> window.onload = function ()<br> {<br> var oBox = document.getElementById("box");<br> var bLeft = bTop = bRight = bBottom = bCtrlKey = false; <p>setInterval(function()<br> {<br> if (b左)<br> {<br> oBox.style.left = oBox.offsetLeft - 10 "px"<br> }<br> else if (bRight)<br> {<br> oBox.style.left = oBox.offsetLeft 10 "px"<br> }</p> <p>if (bTop)<br> {<br> oBox.style.top = oBox.offsetTop - 10 "ピクセル" <br> }<br> else if(bBottom)<br> {<br> oBox.style.top = oBox.offsetTop 10 "px"<br> }<br> //オーバーフローを防止します<br> 制限();<br> },30);</p> <p>document.onkeydown = 関数 (イベント)<br> {<br> var イベント = イベント || ウィンドウ.イベント;<br> bCtrlKey =event.ctrlKey;</p> <p>スイッチ (event.keyCode)<br> {<br> ケース 37:<br> bLeft = true;<br> 休憩;<br> ケース 38:<br> if(bCtrlKey)<br> {<br> var oldWidth = oBox.offsetWidth;<br> var oldHeight = oBox.offsetHeight;</p> <p>oBox.style.width = oBox.offsetWidth * 1.5 "px";<br> oBox.style.height = oBox.offsetHeight * 1.5 "ピクセル"; </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(bCtrlKey)<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 "ピクセル"; <br>oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 "px";</p> oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 "px";<p> <br>休憩</p> }<p> bBottom = true;<br> 休憩;<br> ケース 49:<br> bCtrlKey && (oBox.style.background = "green");<br> 休憩;<br> ケース 50:<br> bCtrlKey && (oBox.style.background = " yellow");<br> 休憩;<br> ケース 51:<br> bCtrlKey && (oBox.style.background = "blue");<br> 休憩;<br> }<br> <br> false を返す };</p> <p>document.onkeyup = 関数 (イベント)<br> {</p> switch ((event || window.event).keyCode)<p> {<br> ケース 37:<br> bLeft = false;<br> 休憩;<br> ケース 38:<br> bTop = false;<br> 休憩;<br> ケース 39:<br> bRight = false;<br> 休憩;<br> ケース 40:<br> bBottom = false;<br> 休憩;<br> }<br> };<br> <br>//オーバーフローを防止<br> 関数limit()</p> {<p> var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight]<br> //左オーバーフローを防止します<br> oBox.offsetLeft //上部のオーバーフローを防止します<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 /> 手順: 上: ↑ 下: ↓ 左: ← 右: → Ctrl 1 : 背景が緑色に変わります Ctrl 2 : 背景が黄色に変わります Ctrl 3 : 背景が青に変わります Ctrl ↑ : 拡大 Ctrl ↓ : ズームアウト html 部分: コードをコピー コードは次のとおりです:ブロック [DIV] を移動しました この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
