この記事では、JSによるDIVの動きを制御するキーボードを実装する方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
CSSスタイルの部分:
次のようにコードをコピーします。<style type = "text/css">
html、body {overflow:hidden;}
ボディ{マージン:0;パディング:0;}
pre {color:緑;パディング:10px 15px;背景:#f0f0f0;境界線:1px点線#333;フォント:12px/1.5クーリエNEW;マージン:12px;}
span {color:#999;}
#box {position:absolute; top:50px; left:300px; width:100px; height:100px; background:red;}
</style>
JSパート:
次のようにコードをコピーします。<script type = "text/javascript">
window.onload = function()
{
var obox = document.getElementById( "box");
var bleft = btop = bright = bbottom = bctrlkey = false;
setInterval(function()
{
if(bleft)
{
obox.style.left = obox.offsetleft -10 + "px"
}
else if(明るい)
{
obox.style.left = obox.offsetleft + 10 + "px"
}
if(btop)
{
obox.style.top = obox.offsettop -10 + "px"
}
else if(bbottom)
{
obox.style.top = obox.offsettop + 10 + "px"
}
//オーバーフローを防ぎます
limit();
}、30);
document.onkeydown = function(event)
{
var event = event || window.event;
bctrlkey = event.ctrlkey;
switch(event.keycode)
{
ケース37:
bleft = true;
壊す;
ケース38:
if(bctrlkey)
{
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(bctrlkey)
{
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";
壊す;
}
bbottom = true;
壊す;
ケース49:
bctrlkey &&(obox.style.background = "green");
壊す;
ケース50:
bctrlkey &&(obox.style.background = "yellow");
壊す;
ケース51:
bctrlkey &&(obox.style.background = "blue");
壊す;
}
falseを返します
};
document.onkeyup = function(event)
{
switch((event || window.event).keycode)
{
ケース37:
bleft = false;
壊す;
ケース38:
btop = false;
壊す;
ケース39:
bright = false;
壊す;
ケース40:
bbottom = false;
壊す;
}
};
//オーバーフローを防ぎます
function lime()
{
var doc = [document.documentelement.clientwidth、document.documentelement.clientheight]
//左側がオーバーフローしないようにします
obox.offsetLeft <= 0 &&(obox.style.left = 0);
//トップオーバーフローを防ぎます
obox.offsettop <= 0 &&(obox.style.top = 0);
//右側がオーバーフローしないようにします
doc [0] -obox.offsetleft -obox.offsetwidth <= 0 &&(obox.style.left = doc [0] -obox.offsetwidth + "px");
//ボトムオーバーフローを防ぎます
doc [1] -obox.offsettop -obox.offsetheight <= 0 &&(obox.style.top = doc [1] -obox.offsetheight + "px")
}
};
</script>
説明:
上:↑次:↓左:←右:→
Ctrl + 1:背景は緑になります
Ctrl + 2:背景は黄色になります
Ctrl + 3:背景は青に変わります
Ctrl +↑:ズームインします
Ctrl +↓:縮小
HTMLパーツ:
コードコピーは次のとおりです。ブロックが移動されています[div]
<div id = "box"> </div>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。