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

如何使小灰蝶一直按一直走，而不是单独停下

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

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>&#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('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

真服了，我之前都记得改过那个地方，结果映像中好像没用。{:5_100:}，太难了。大哥牛逼

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

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

大哥能否给我瞅下我其他问题
页: [1]
查看完整版本: 如何使小灰蝶一直按一直走，而不是单独停下