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


Posted in Javascript onDecember 11, 2020

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 Javascript
js实现批量删除功能
Aug 27 Javascript
JS实现京东商品分类侧边栏
Dec 11 #Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 #Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 #Vue.js
一行JavaScript代码如何实现瀑布流布局
Dec 11 #Javascript
react中hook介绍以及使用教程
Dec 11 #Javascript
js实现菜单跳转效果
Dec 11 #Javascript
jquery实现拖拽小方块效果
Dec 10 #jQuery
You might like
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
javascript实现简易计算器
2017/02/01 Javascript
几种tab切换详解
2017/02/03 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
django框架如何集成celery进行开发
2017/05/24 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
浅析Python requests 模块
2020/10/09 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
内衣营销方案
2014/03/15 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
三八活动策划方案
2014/08/17 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
2015年维修工作总结
2015/04/25 职场文书