设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 为何按wasd按键移动不了飞碟图标
返回列表 发新帖
查看: 3475|回复: 10

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

[复制链接]
小黄练编程
发表于 2022-4-2 20:39:09 | 显示全部楼层 |阅读模式

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

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

x
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>图片跟随鼠标事件</title>
  6.                 <style>
  7.                 div {
  8.                         position:relative;
  9.                         width:700px;
  10.                         height:500px;
  11.                         background:url(img/24_404_15a398a36e51a9e.gif) ;
  12.                         margin-top:100px;
  13.                         margin-left:100px;
  14.                         background-color:red;
  15.                 }
  16.             span {
  17.                         position:absolute;
  18.                         top:0;
  19.                         left:0;
  20.                         font-size:80px;
  21.                 }
  22.                 </style>
  23.         </head>
  24.         <body>
  25.                 <div>
  26.                         <span>&#128760;</span>
  27.                 </div>
  28.                 <script>
  29.                 var span=document.querySelector('span');
  30.                 // var div=document.querySelector('div');
  31.                 // div.addEventListener('mousemove',function(e){
  32.                 //         var x=e.pageX;
  33.                 //         var y=e.pageY;
  34.                 //         span.style.top=y-150+'px';
  35.                 //         span.style.left=x-160+'px';
  36.                 //         });
  37.                 var div=document.querySelector('div');
  38.                         div.addEventListener('keyup',function(e){
  39.                                 console.log(e.keyCode);
  40.                                 console.log(1);
  41.                                 var x=e.pageX;
  42.                                 var y=e.pageY;
  43.                                 if(e.keyCode==87){
  44.                                 x=x+20;
  45.                                 }
  46.                                 if(e.keycode=65){
  47.                                         y=y-20;
  48.                                 }
  49.                                 if(e.keyCode==83){
  50.                                         x=x-20;
  51.                                 }
  52.                                 if(e.keyCode==68){
  53.                                         y=y+20;
  54.                                 }
  55.                                 span.style.top=y+'px';
  56.                                 span.style.left=x+'px';
  57.                         });
  58.                 </script>
  59.         </body>
  60. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
ba21
2022-4-2 22:58:57
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>图片跟随鼠标事件</title>
  6.                 <style>
  7.                 div {
  8.                         position:relative;
  9.                         width:700px;
  10.                         height:500px;
  11.                         background:url(24_404_15a398a36e51a9e.gif) ;
  12.                         margin-top:100px;
  13.                         margin-left:100px;
  14.                         background-color:red;
  15.                 }
  16.             span {
  17.                         position:absolute;
  18.                         top:0;
  19.                         left:0;
  20.                         font-size:80px;
  21.                 }
  22.                 </style>
  23.         </head>
  24.         <body>
  25.                 <div>
  26.                         <span>&#128760;</span>
  27.                 </div>
  28.                 <script>
  29.                 var span=document.querySelector('span');
  30.                 // var div=document.querySelector('div');
  31.                 // div.addEventListener('mousemove',function(e){
  32.                 //         var x=e.pageX;
  33.                 //         var y=e.pageY;
  34.                 //         span.style.top=y-150+'px';
  35.                 //         span.style.left=x-160+'px';
  36.                 //         });
  37.                 var div=document.querySelector('div');
  38.                 div.setAttribute('tabindex', '0');
  39.                 div.focus();               
  40.                         div.addEventListener('keyup',function(e){
  41.                         var evt=e||event;
  42.                          console.log(e.keyCode);
  43.    
  44.                                 switch(e.keyCode){
  45.                                 case 87:
  46.                                     span.style.top=span.offsetTop-5+'px';
  47.                                     break;
  48.                                 case 65:
  49.                                     span.style.left=span.offsetLeft-5+'px';
  50.                                     break;
  51.                                 case 83:
  52.                                     span.style.top=span.offsetTop+5+'px';
  53.                                     break;
  54.                                 case 68:
  55.                                     span.style.left=span.offsetLeft+5+'px';                                       
  56.                                 }

  58.                         });
  59.                 </script>
  60.         </body>
  61. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

ba21
发表于 2022-4-2 22:58:57 | 显示全部楼层    本楼为最佳答案   
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>图片跟随鼠标事件</title>
  6.                 <style>
  7.                 div {
  8.                         position:relative;
  9.                         width:700px;
  10.                         height:500px;
  11.                         background:url(24_404_15a398a36e51a9e.gif) ;
  12.                         margin-top:100px;
  13.                         margin-left:100px;
  14.                         background-color:red;
  15.                 }
  16.             span {
  17.                         position:absolute;
  18.                         top:0;
  19.                         left:0;
  20.                         font-size:80px;
  21.                 }
  22.                 </style>
  23.         </head>
  24.         <body>
  25.                 <div>
  26.                         <span>&#128760;</span>
  27.                 </div>
  28.                 <script>
  29.                 var span=document.querySelector('span');
  30.                 // var div=document.querySelector('div');
  31.                 // div.addEventListener('mousemove',function(e){
  32.                 //         var x=e.pageX;
  33.                 //         var y=e.pageY;
  34.                 //         span.style.top=y-150+'px';
  35.                 //         span.style.left=x-160+'px';
  36.                 //         });
  37.                 var div=document.querySelector('div');
  38.                 div.setAttribute('tabindex', '0');
  39.                 div.focus();               
  40.                         div.addEventListener('keyup',function(e){
  41.                         var evt=e||event;
  42.                          console.log(e.keyCode);
  43.    
  44.                                 switch(e.keyCode){
  45.                                 case 87:
  46.                                     span.style.top=span.offsetTop-5+'px';
  47.                                     break;
  48.                                 case 65:
  49.                                     span.style.left=span.offsetLeft-5+'px';
  50.                                     break;
  51.                                 case 83:
  52.                                     span.style.top=span.offsetTop+5+'px';
  53.                                     break;
  54.                                 case 68:
  55.                                     span.style.left=span.offsetLeft+5+'px';                                       
  56.                                 }

  58.                         });
  59.                 </script>
  60.         </body>
  61. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-4-3 20:53:16 | 显示全部楼层
ba21 发表于 2022-4-2 22:58

咋的能让他按住某个键一直移动下去，松开才停，按一下移动一下太慢了
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-4-5 19:35:42 | 显示全部楼层
ba21 发表于 2022-4-2 22:58

大哥大哥，help，
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2022-4-5 19:38:45 | 显示全部楼层
小黄练编程 发表于 2022-4-5 19:35
大哥大哥，help，

一贴一问。谢谢
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-4-5 19:39:26 | 显示全部楼层
ba21 发表于 2022-4-5 19:38
一贴一问。谢谢

前面
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2022-4-5 19:40:09 | 显示全部楼层
小黄练编程 发表于 2022-4-5 19:39
前面

结贴，重新发问。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-4-5 19:46:31 | 显示全部楼层
ba21 发表于 2022-4-5 19:38
一贴一问。谢谢

哪里标记下不同
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2022-4-5 19:48:03 | 显示全部楼层
小黄练编程 发表于 2022-4-5 19:46
哪里标记下不同

把你要问的问题重新发一贴。尊重别人的劳动成果。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-4-5 19:51:37 | 显示全部楼层
ba21 发表于 2022-4-5 19:48
把你要问的问题重新发一贴。尊重别人的劳动成果。

大哥讲究人啊，佩服
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-4-5 19:55:32 | 显示全部楼层
ba21 发表于 2022-4-5 19:40
结贴，重新发问。

我还有好几个其他问题，帖子，大哥help
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-5 02:23

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表