键盘控制层的移动 请分别按下 ↑、↓、←、→，
试试看有什么效果？
控制键设置:
向上移动:
向下移动:
向左移动:
向右移动:
每次移动
px;
//alert(txt.style.top);
var up,down,left,right;
up = 38;
down = 40;
left = 37;
right = 39;
function document.onkeydown()
{
// alert(event.keyCode);
//左：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");
if(event.srcElement.tagName == "INPUT")
{
if(event.srcElement == document.getElementById("Int"))
{
if(event.keyCode == 13)
document.body.focus();
if((event.keyCode < 96 || event.keyCode > 105) && event.keyCode != 8 && event.keyCode != 46 && !(event.keyCode >= 37 && event.keyCode <= 40) )
event.returnValue = false;
return;
}
else
{
switch(event.keyCode)
{
case 37:{
event.srcElement.value = "←";
break;
}
case 38:{
event.srcElement.value = "↑";
break;
}
case 39:{
event.srcElement.value = "→";
break;
}
case 40:{
event.srcElement.value = "↓";
break;
}
}
switch(event.srcElement)
{
case document.getElementById("Up"):{
up = event.keyCode;
break;
}
case document.getElementById("Down"):{
down = event.keyCode;
break;
}
case document.getElementById("Left"):{
left = event.keyCode;
break;
}
case document.getElementById("Right"):{
right = event.keyCode;
break;
}
}
}
}
else
{
switch(event.keyCode)
{
case left:{
press = "
← ";
evet = "
向 左 移动" + " " + int + " px 。";
div.style.left = (parseInt(div.currentStyle.left) - int) + "px";
if(parseInt(div.style.left) <= 0)
{
evet = "已经到了
最左边 ，无法再
向左 移动。";
div.style.left = "0px";
break ;
}
break;
}
case up:{
press = "
↑ ";
evet = "
向 上 移动" + " " + int + " px 。";
div.style.top = (parseInt(div.currentStyle.top) - int) + "px";
if(parseInt(div.style.top) <= 0)
{
evet = "已经到了
最上边 ，无法再
向上 移动。";
div.style.top = "0px";
break ;
}
break;
}
case right:{
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;
}
case down:{
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;
}
default:
{
return;
}
}
str = "
您按下了" + press + "键，
";
str += "
该图层" + evet;
txt.innerHTML = str;
}
}
//-->
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
