[已解决]如何使小灰蝶一直按一直走，而不是单独停下

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

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

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

x

<!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-5 20:00:26

<!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('keydown',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-5 20:00:26

<!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('keydown',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-5 20:07:51

ba21 发表于 2022-4-5 20:00
图片跟随鼠标事件

...

老大哥，哪里不同啊，给点标记呗

ba21 · 发表于 2022-4-5 20:11:18

小黄练编程发表于 2022-4-5 20:07
老大哥，哪里不同啊，给点标记呗

keydown

小黄练编程 · 发表于 2022-4-5 20:14:47

ba21 发表于 2022-4-5 20:11
keydown

真服了，我之前都记得改过那个地方，结果映像中好像没用。

，太难了。大哥牛逼

小黄练编程 · 发表于 2022-4-5 20:17:44

ba21 发表于 2022-4-5 20:00
图片跟随鼠标事件

...

大哥能否给我瞅下我其他问题

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