小黄练编程 发表于 2022-4-2 20:39:09

为何按wasd按键移动不了飞碟图标

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>图片跟随鼠标事件</title>
                <style>
                div {
                        position:relative;
                        width:700px;
                        height:500px;
                        background:url(img/24_404_15a398a36e51a9e.gif) ;
                        margin-top:100px;
                        margin-left:100px;
                        background-color:red;
                }
          span {
                        position:absolute;
                        top:0;
                        left:0;
                        font-size:80px;
                }
                </style>
        </head>
        <body>
                <div>
                        <span>&#128760;</span>
                </div>
                <script>
                var span=document.querySelector('span');
                // var div=document.querySelector('div');
                // div.addEventListener('mousemove',function(e){
                //         var x=e.pageX;
                //         var y=e.pageY;
                //         span.style.top=y-150+'px';
                //         span.style.left=x-160+'px';
                //         });
                var div=document.querySelector('div');
                        div.addEventListener('keyup',function(e){
                                console.log(e.keyCode);
                                console.log(1);
                                var x=e.pageX;
                                var y=e.pageY;
                                if(e.keyCode==87){
                                x=x+20;
                                }
                                if(e.keycode=65){
                                        y=y-20;
                                }
                                if(e.keyCode==83){
                                        x=x-20;
                                }
                                if(e.keyCode==68){
                                        y=y+20;
                                }
                                span.style.top=y+'px';
                                span.style.left=x+'px';
                        });
                </script>
        </body>
</html>

ba21 发表于 2022-4-2 22:58:57

<!DOCTYPE html>
<html>
      <head>
                <meta charset="utf-8">
                <title>图片跟随鼠标事件</title>
                <style>
                div {
                        position:relative;
                        width:700px;
                        height:500px;
                        background:url(24_404_15a398a36e51a9e.gif) ;
                        margin-top:100px;
                        margin-left:100px;
                        background-color:red;
                }
            span {
                        position:absolute;
                        top:0;
                        left:0;
                        font-size:80px;
                }
                </style>
      </head>
      <body>
                <div>
                        <span>&#128760;</span>
                </div>
                <script>
                var span=document.querySelector('span');
                // var div=document.querySelector('div');
                // div.addEventListener('mousemove',function(e){
                //         var x=e.pageX;
                //         var y=e.pageY;
                //         span.style.top=y-150+'px';
                //         span.style.left=x-160+'px';
                //         });
                var div=document.querySelector('div');
                div.setAttribute('tabindex', '0');
                div.focus();               
                        div.addEventListener('keyup',function(e){
                        var evt=e||event;
                         console.log(e.keyCode);
   
                              switch(e.keyCode){
                              case 87:
                                    span.style.top=span.offsetTop-5+'px';
                                    break;
                              case 65:
                                    span.style.left=span.offsetLeft-5+'px';
                                    break;
                              case 83:
                                    span.style.top=span.offsetTop+5+'px';
                                    break;
                              case 68:
                                    span.style.left=span.offsetLeft+5+'px';                                       
                              }

                        });
                </script>
      </body>
</html>

小黄练编程 发表于 2022-4-3 20:53:16

ba21 发表于 2022-4-2 22:58


咋的能让他按住某个键一直移动下去，松开才停，按一下移动一下太慢了

小黄练编程 发表于 2022-4-5 19:35:42

ba21 发表于 2022-4-2 22:58


大哥大哥，help，

ba21 发表于 2022-4-5 19:38:45

小黄练编程 发表于 2022-4-5 19:35
大哥大哥，help，

一贴一问。谢谢

小黄练编程 发表于 2022-4-5 19:39:26

ba21 发表于 2022-4-5 19:38
一贴一问。谢谢

前面

ba21 发表于 2022-4-5 19:40:09

小黄练编程 发表于 2022-4-5 19:39
前面

结贴，重新发问。

小黄练编程 发表于 2022-4-5 19:46:31

ba21 发表于 2022-4-5 19:38
一贴一问。谢谢

哪里标记下不同

ba21 发表于 2022-4-5 19:48:03

小黄练编程 发表于 2022-4-5 19:46
哪里标记下不同

把你要问的问题重新发一贴。尊重别人的劳动成果。

小黄练编程 发表于 2022-4-5 19:51:37

ba21 发表于 2022-4-5 19:48
把你要问的问题重新发一贴。尊重别人的劳动成果。

大哥讲究人啊，佩服

小黄练编程 发表于 2022-4-5 19:55:32

ba21 发表于 2022-4-5 19:40
结贴，重新发问。

我还有好几个其他问题，帖子，大哥help
页: [1]
查看完整版本: 为何按wasd按键移动不了飞碟图标