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 相关文章推荐
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
js实现磁性吸附的示例
Oct 26 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
Php+SqlServer实现分页显示
2006/10/09 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
php静态文件生成类实例分析
2015/01/03 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
python 排序算法总结及实例详解
2016/09/28 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
学生安全责任书模板
2014/07/25 职场文书
单位员工收入证明样本
2014/10/09 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python