JS设置自定义快捷键并实现图片上下左右移动


Posted in Javascript onOctober 17, 2019

JS代码实现自定义热键

实现功能:

1.自定义上下左右键

2.使用自定义热键或者使用键盘上下左右键移动图片

效果图:

JS设置自定义快捷键并实现图片上下左右移动

步骤1:

HTML代码:

<!DOCTYPE html>
<html>
 <head lang="en">
 <meta charset="UTF-8">
 <title>使用自定义按键实现图片移动</title>
 <style type="text/css">
  table {
  border-collapse: collapse;
  }
 </style>
 <script src="js/key.js"></script>
 </head>
 <body>
 <img id="img" src="img/Koala.jpg" align="center" style="width: 80px;height: 80px;position: absolute;left:0px;top: 0px" />
 <table align="center" border="1">
  <tr>
  <td align="center" colspan="2">修改上下左右键</td>
  </tr>
  <tr>
  <td>上:</td>
  <td><input type="text" onkeyup="myFunction('up')" maxlength="1"></td>
  </tr>
  <tr>
  <td>下:</td>
  <td><input type="text" onkeyup="myFunction('down')" maxlength="1"></td>
  </tr>
  <tr>
  <td>左:</td>
  <td><input type="text" onkeyup="myFunction('left')" maxlength="1"></td>
  </tr>
  <tr>
  <td>右:</td>
  <td><input type="text" onkeyup="myFunction('right')" maxlength="1"></td>
  </tr>
  <tr>
  <td align="center" colspan="2"><input type="button" value="确定" onclick="confirm()" /></td>
  </tr>
 </table>
 </body>
</html>

步骤2:

JS:

var up, down, left, right;
var up1, down1, left1, right1;
var obj = document.getElementById("img");
obj.left = 0;
obj.top = 0;
//通过设置四个不同参数来进行判断
function myFunction(str) {
 var Key = window.event.keyCode;
 //当str=设置的参数时把key赋值给up1
 if (str == "up") {
 up1 = Key;
 }
 if (str == "down") {
 down1 = Key;
 }
 if (str == "left") {
 left1 = Key;
 }
 if (str == "right") {
 right1 = Key;
 }
}
//确定函数事件
function confirm() {
 //把up1赋值给up
 up = up1;
 down = down1;
 left = left1;
 right = right1;
 alert("您设置的热键键值为:" + up + ";" + down + ";" + left + ";" + right);
 fkey();
}
function fkey() {
 console.log(event.keyCode);
 var Key = window.event.keyCode;
 //获取你自定义的键和键盘上下左右键都可以用
 if (Key == 37 || Key == parseInt(left)) {
 //左
 obj.left -= 80;
 }
 if (Key == 38 || Key == parseInt(up)) {
 //上
 obj.top -= 80;
 }
 if (Key == 39 || Key == parseInt(right)) {
 //右
 obj.left += 80;
 }
 if (Key == 40 || Key == parseInt(down)) {
 //下
 obj.top += 80;
 }
 obj.style.left = obj.left + "px", obj.style.top = obj.top + "px";
}
document.onkeydown = fkey;

总结

以上所述是小编给大家介绍的JS设置自定义快捷键并实现图片上下左右移动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
基于jquery的滚动新闻列表
Jun 19 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
javascript每日必学之继承
Feb 23 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 Javascript
JavaScript实现显示和隐藏图片
Apr 29 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 #Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 #Javascript
浅谈Vue.set实际上是什么
Oct 17 #Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 #Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 #Javascript
Weex开发之地图篇的具体使用
Oct 16 #Javascript
WEEX环境搭建与入门详解
Oct 16 #Javascript
You might like
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
深入理解React高阶组件
2017/09/28 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
pip安装python库的方法总结
2019/08/02 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
2014道德模范事迹材料
2014/02/16 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
银行给客户的感谢信
2015/01/23 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
MySQL如何使备份得数据保持一致
2022/05/02 MySQL