程序员

JS实现可以用键盘方向键控制的动画

作者:admin 2021-06-22 我要评论

用JS写一个可以用键盘方向键控制的动画: 效果如下: 好了,代码如下: !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

用JS写一个可以用键盘方向键控制的动画:

效果如下:

好了,代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  body {
   overflow: hidden
  }
  
  img {
   position: absolute;
   top: 0;
   left: 10px;
   width: 100px;
   height: 82px
  }
  
  .right {
   transform: rotateY(180deg)
  }
  
  .top {
   transform: rotateZ(45deg)
  }
  
  .bottom {
   transform: rotateZ(-45deg)
  }
 </style>
</head>

<body>
 <img src="./img//Blue ocean11.png" alt="" class="move-background">
 <script>
  var oImg = document.querySelector("img");

  /* 思路: */
  /* 监听键盘的事件(<- -> 上 下) */
  document.onkeydown = function(e) {
   e = e || window.event;

   var code = e.which || e.keyCode;
   var offset = 10;
   switch (code) {
    case 37:
     console.log("left");
     console.log('innerWidth',innerWidth,oImg.offsetLeft);
     oImg.className = "";
     var left = oImg.offsetLeft - offset;
     if (left <= -oImg.offsetWidth) {
      left = window.innerWidth;
     }
     oImg.style.left = left + "px";
     break;
    case 38:
     console.log("top");
     oImg.className = "top";
     var top = oImg.offsetTop - offset;
     if (top <= -oImg.offsetHeight) {
      top = window.innerHeight;
     }
     oImg.style.top = top + "px";
     break;
    case 39:
     console.log("right");
     oImg.className = "right";
     var left = oImg.offsetLeft + offset;
     if (left >= window.innerWidth) {
      left = -oImg.offsetWidth;
     }
     oImg.style.left = left + "px";
     break;
    case 40:
     console.log("bottom");
     oImg.className = "bottom";
     var top = oImg.offsetTop + offset;
     if (top >= window.innerHeight) {
      top = -oImg.offsetHeight;
     }
     oImg.style.top = top + "px";
     break;
    default:
     break;
   }

   /* 临界值检查 */
  }
 </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。


原文链接:https://m.jb51.net/article/201980.htm

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 阿里巴巴DevOps实践指南(八)| 以特性

    阿里巴巴DevOps实践指南(八)| 以特性

  • 阿里巴巴DevOps实践指南(五)| 业务驱

    阿里巴巴DevOps实践指南(五)| 业务驱

  • RISC-V工具链简介

    RISC-V工具链简介

  • 变局时代:RISC-V处理器架构的技术演变

    变局时代:RISC-V处理器架构的技术演变