页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

键盘元素的控制小方块的移动效果

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<HTML> 
<HEAD> 
<!--code by hongseheike 
<TITLE>键盘元素的控制</TITLE> 
<SCRIPT language=javascript> 
  ns4 = (document.layers)?true:false; 
  ie4 = (document.all)?true:false; 
  function init(){ 
        if(ns4){block = document.blockDiv;} 
    if(ie4){block = blockDiv.style;} 
    block.xpos = parseInt(block.left); 
        block.active = false; 
    document.onkeydown = keyDown; 
    document.onkeyup = keyUp; 
    if(ns4){document.captureEvents(Event.KEYDOWN | Event.KEYUP);} 
  } 
  function keyDown(e){ 
        if(ns4){var nkey=e.which;var iekey=0;} 
    if(ie4){var iekey=event.keyCode;var nkey=0;} 
    if((nkey==97 || iekey==65) && !block.active){ 
        block.active = true; 
        slide();} 
  } 
  function keyUp(e){ 
        if(ns4){var nkey=e.which;var iekey=0;} 
    if(ie4){var iekey=event.keyCode;var nkey=0;} 
    if(nkey==97 || iekey==65){ 
    block.active = false; 
        } 
  } 
  function slide(){ 
      if(block.active){ 
        block.xpos += 5; 
    block.left = block.xpos; 
        status = block.xpos; 
    setTimeout("slide()",30); 
      } 
  } 
</SCRIPT> 
</head> 
<BODY onLoad="init()"> 
//Javascript Document  
<HR> 
<center><H3>请按“A”键，使方块滑动</H3></center> 
<DIV id="blockDiv" style="position:absolute;LEFT:25; WIDTH:40;height:40 TOP:

50;layer-background-color:red;background-color:red;"> 
<h2>~v~</h2> 
</DIV> 
</BODY> 
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：键盘元素的控制小方块的移动效果