javascript下用键盘控制层的移动的代码

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <title>键盘控制层的移动</title>

  <style type="text/css">

  <!--

  #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;

  }

  -->

  </style>

  </head>

  <body>

  <div id="Div"><span id="Txt"><p>请分别按下 <font>↑</font>、<font>↓</font>、<font>←</font>、<font>→</font>,</p><p>

  试试看有什么效果? </p></span></div>

  <span id="Layer1">控制键设置:<br>

  向上移动:

  <input name="Up" type="text" value="↑" size="6"><br>

  向下移动:

  <input name="Down" type="text" value="↓" size="6"><br>

  向左移动:

  <input name="Left" type="text" value="←" size="6"><br>

  向右移动:

  <input name="Right" type="text" value="→" size="6"><br>

  每次移动  <input name="Int" type="text" id="Int" value="5" size="4" maxlength="3">

  px;</span>

  </body>

  </html>

  <script language="javascript">

  <!--

  //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 = "<font> ← </font>";

  evet = "<font>向 <b>左</b> 移动</font>" + " " + int + " px 。";

  div.style.left = (parseInt(div.currentStyle.left) - int) + "px";

  if(parseInt(div.style.left) <= 0)

  {

  evet = "已经到了 <font>最左边</font> ,无法再 <font>向左</font> 移动。";

  div.style.left = "0px";

  break ;

  }

  break;

  }

  case up:{

  press = "<font> ↑ </font>";

  evet = "<font>向 <b>上</b> 移动</font>" + " " + int + " px 。";

  div.style.top = (parseInt(div.currentStyle.top) - int) + "px";

  if(parseInt(div.style.top) <= 0)

  {

  evet = "已经到了 <font>最上边</font> ,无法再 <font>向上</font> 移动。";

  div.style.top = "0px";

  break ;

  }

  break;

  }

  case right:{

  press = "<font> → </font>";

  evet = "<font>向 <b>右</b> 移动</font>" + " " + 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 = "已经到了 <font>最右边</font> ,无法再 <font>向右</font> 移动。";

  break ;

  }

  break;

  }

  case down:{

  press = "<font> ↓ </font>";

  evet = "<font>向 <b>下</b> 移动</font>" + " " + 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 = "已经到了 <font>最下边</font> ,无法再 <font>向下</font> 移动。";

  break ;

  }

  break;

  }

  default:

  {

  return;

  }

  }

  str = "<p>您按下了" + press + "键,</p>";

  str += "<p>该图层" + evet;

  txt.innerHTML = str;

  }

  }

  //-->

  </script>

  

   [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]