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>

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

赞 (0)

相关推荐

  • 用js实现键盘方向键翻页功能的代码

    今天从网上看到这个功能,不错啊,以后就可以在文章中,增加这个功能了var re = /<a href=[\"\']?([-=\w\.\/\?]+)[\"\']?>[\[\(<]?上一页[\]\)>]?<\/a>/igm; if (window.document.body.innerHTML.search(re) >= 0) {   var PREVIOUS_PAGE = RegExp.$1; } 如果搜下到"上一页",则定义

  • js键盘方向键 文章翻页跳转的效果[小说站常用已支持firefox]

    一个小小的人性化功能,给用户很大的方便,所以如果你要做类似的网站,侠客建议还是加上哟. 先体验一下此功能吧: 按下向左方向键转到:www.baidu.com 按下向右方向键转到:www.google.com 按下向回车键转到:www.jb51.net 按下ctrl+enter回车键转到:www.jb51.net 实现本功能的javascript代码: 支持按键盘方向键翻页跳转的代码 document.onkeydown = pageEvent; var enableEnter = true; /

  • JavaScript取得键盘按下方向键是哪个的方法

    JavaScript取得键盘按下方向键是哪个的方法

    本文实例讲述了JavaScript取得键盘按下方向键是哪个的方法.分享给大家供大家参考.具体如下: 这里通过创建一个event.keyCode对象,可有效获取键盘上的方向键,运行代码后,点击键盘上的任意方向键,网页会以Alert的方式返回你按下的是哪个键. 运行效果如下图所示: 具体代码如下: <html> <head> <title>取得键盘的方向键</title> <script language="javascript">

  • JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例

    本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动.分享给大家供大家参考,具体如下: 1. 盒子跟着鼠标移动 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no,

  • 按键盘方向键翻页跳转的javascript代码(支持ie,firefox)

    网上提供的代码,多是仅支持ie,下面这个是我们特别为大家整理的兼容firefox版本的. 支持按键盘方向键翻页跳转的代码支持ie,firefox document.onkeydown = pageEvent; var prevpage="http://www.jb51.net/softs"; var nextpage="http://www.jb51.net/codes"; function pageEvent(evt){ evt = evt ||window.ev

  • 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-e

  • JavaScript使用键盘输入控制实现数字验证功能

    JavaScript使用键盘输入控制实现数字验证功能

    现在有一个需求如下图: 产品经理说Card Number只能让输入数字(中间的空格是格式自加的,也是用js实现的),有时候我脑海中出现了个声音,啥玩意,加个type=number不就行了,事实发现图样图森破了,先不说type=number后面会有个上下标(虽然用css可干掉),但是这个类型是支持科学输入法的,就是小数点和e这样的是可以输入的,于是乎只能用其他的方式了,后来想用检索到输入了非数字就干掉,但是这样还是能输入,想法被打回,于是乎最终采用了键盘输入控制的办法,其实很简单,代码如下: va

  • python方向键控制上下左右代码

    python方向键控制上下左右代码

    本文所示代码实现python编程方向键控制图片上下左右,我们首先看下演示结果. 演示: 实例代码: bif="1.jpg" mif="2.jpg" import pygame,sys from pygame.locals import * pygame.init() screen=pygame.display.set_mode((640,360),0,32) background=pygame.image.load(bif).convert() mouse_c=py

  • python pygame实现方向键控制小球

    python pygame实现方向键控制小球

    最后一个项目用到了pygame,  实现方向键控制小球,对于模块不熟悉的我还是查询了一些资料介绍. import sys import pygame from pygame.locals import * def control_ball(event): speed = [x,y] =[0,0]# 设置相对位移 speed_offset = 1 #小球的速度 # 如果事件的类型是 键盘输入,就根据方向键来求出速度的方向(默认是从左往右为1,从上往下为1) if event.type == KEY

  • jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】

    jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】

    本文实例讲述了jQuery实现通过方向键控制div块上下左右移动的方法.分享给大家供大家参考,具体如下: 在CSS中当DOM元素的position属性为absolute或relative时,我们可以通过改变这个元素的left和top属性的具体值来控制元素在页面中显现的位置. 利用上述属性,我们可以简单实现一个元素在页面中的移动效果,这里我们采用JQuery的animate方法来实现动画效果,利用keydown监听方向键按下的事件(这里采用keydown而不是keyup,是为了能够在方向键被一直按

  • java通过方向键控制小球移动的小游戏

    本文需求实现了java通过方向键控制小球移动的具体过程,供大家参考,具体内容如下 需求分析: 第一 要画出一个小球 第二 要能通过控制方向键控制它的移动 第一部分的实现 1.首先要画一个大窗体 public class BallMove extends JFrame 在开发Java应用程序时,通常情况下利用JFrame创建大窗口.利用JFrame创建的窗口分别包含一个标题.最小化按钮.最大化按钮和关闭按钮 用主类去继承JFrame类就可以使用它的方法啦 2.接着用一个类来继承JPanel 如果说

  • js鼠标按键事件和键盘按键事件用法实例汇总

    本文实例讲述了js鼠标按键事件和键盘按键事件用法.分享给大家供大家参考,具体如下: keydown,keyup,keypress:属于你的键盘按键 mousedown,mouseup:属于你的鼠标按键 当按钮被按下时,发生 keydown 事件, keyup是在用户将按键抬起的时候才会触发的, 完整的 key press 过程分为两个部分:1. 按键被按下:2. 按键被松开. 当用户在这个元素上按下鼠标键的时候,发生mousedown 当用户在这个元素上松开鼠标键的时候,发生mouseup 例子

随机推荐