脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS键盘方向键控制

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

 更新时间：2020年12月11日 14:24:10   作者：KindleYoung  
这篇文章主要为大家详细介绍了JS实现可以用键盘方向键控制的动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS实现简单的拖拽效果

    JS实现简单的拖拽效果

    拖拽是前端实现中比较常用的一种效果, HTML5 提供了较为强大的拖拽 API 支持,今天我们来实现一个简单的拖拽效果,需要的朋友可以参考下
    2023-09-09
  • JS中 new Date() 各方法的用法说明

    JS中 new Date() 各方法的用法说明

    这篇文章主要介绍了JS中 new Date() 各方法的用法,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12
  • 实例解析Array和String方法

    实例解析Array和String方法

    本文主要对Array和String方法进行总结，每一部分总结后有实例代码，代码中黄色框方法不改变原数组。PS:所有实例结果均一一运行所得。具有很好的参考价值，需要的朋友一起来看下吧
    2016-12-12
  • 深入理解JavaScript系列（26）：设计模式之构造函数模式详解

    深入理解JavaScript系列（26）：设计模式之构造函数模式详解

    这篇文章主要介绍了深入理解JavaScript系列（26）：设计模式之构造函数模式详解,本文讲解了基本用法、构造函数与原型、只能用new吗？、强制使用new、原始包装函数等内容,需要的朋友可以参考下
    2015-03-03
  • 详解JS中continue关键字和break关键字的区别

    详解JS中continue关键字和break关键字的区别

    在javascript中continue的作用是退出当前次循环，break的作用则是一旦当前循环有break那么直接退出整个循环。本文将通过一些示例为大家详细讲讲二者的区别，感兴趣的可以了解一下
    2022-08-08
  • 关于对async await效率问题的深入思考

    关于对async await效率问题的深入思考

    这篇文章主要给大家介绍了关于对async await效率问题的深入思考,async和await要搭配Promise使用,它进一步极大的改进了Promise的写法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • JS动态设置页面高度的操作代码

    JS动态设置页面高度的操作代码

    这篇文章主要介绍了JS动态设置页面高度的操作代码,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • JavaScript中split与join函数的进阶使用技巧

    JavaScript中split与join函数的进阶使用技巧

    这篇文章主要介绍了JavaScript中split与join函数的进阶使用技巧,split和join通常被用来操作数组和字符串之间的转换,需要的朋友可以参考下
    2016-05-05
  • JS中cookie的使用及缺点讲解

    JS中cookie的使用及缺点讲解

    Cookie就是这样的一种机制。它可以弥补HTTP协议无状态的不足。在Session出现之前，基本上所有的网站都采用Cookie来跟踪会话。下面通过本文给大家介绍JS中cookie的使用及缺点，需要的朋友参考下吧
    2017-05-05
  • 解决layer弹出层的内容页点击按钮跳转到新的页面问题

    解决layer弹出层的内容页点击按钮跳转到新的页面问题

    今天小编就为大家分享一篇解决layer弹出层的内容页点击按钮跳转到新的页面问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论