键盘事件监听

javascript

解决方案 »

  1.   

    主要問題在：
    1. 沒有初始style 樣式
    2. 取值轉換不正確改用計算css
    function press(e) {
        var e = event || window.event;
        var code = e.keyCode;
        if (code == 65) {
            var di = document.getElementById("com");
            var le = di.style.left || (window.getComputedStyle && window.getComputedStyle(di,null).getPropertyValue('left')) || (document.documentElement.currentStyle && di.currentStyle.left);
            var t = parseInt(le, 10) || 0;
            di.style.left = t + 100 + "px"
        }
        else {
            alert("end")
        }
    }
      

  2.   


    用下面这个吧，基本实现上下左右移动，<HTML>
    <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=gb2312">
    <TITLE>通过键盘移动图像</TITLE>
    <STYLE type="text/css">
    body {
     background-image: url(images/game.jpg);
     background-repeat: repeat-y;
    }
    </STYLE>
    <script type="text/javascript">
    var advman = 0;
     function init()
     {
      advman = document.getElementById("man").style.pixelTop;
     }
     function move(event)
     {
    e = event||window.event;
    var obj = document.getElementById("man");
     if(e.keyCode==38)//up
      obj.style.top=obj.offsetTop-20+"px"; 
     if(e.keyCode==40)//down
      obj.style.top=obj.offsetTop+20+"px"; 
     if(e.keyCode==37)//left
      obj.style.left=obj.offsetLeft-20+"px"; 
     if(e.keyCode==39)//right
       obj.style.left=obj.offsetLeft+20+"px"; 
     }
     document.onkeydown= move ;
    </script>
    </HEAD>
    <BODY>
    <DIV id="man" style="position:absolute;left:543px;top:288px;width:89px;height:115px;z-index:1;background:red;"></DIV>
    </BODY>
    </HTML>