[已解决]为何按wasd按键移动不了飞碟图标

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!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>🛸</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>🛸</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>

跳转到最佳答案楼层

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>🛸</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

账号		自动登录	找回密码
密码			立即注册