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 相关文章推荐
popdiv
Jul 14 Javascript
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
一个可复用的vue分页组件
May 15 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 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设计聊天室步步通
2006/10/09 PHP
转PHP手册及PHP编程标准
2006/12/17 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
python实现车牌识别的示例代码
2019/08/05 Python
python实现批量命名照片
2020/06/18 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
业务代表的岗位职责
2013/11/16 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
岗位廉政承诺书
2014/03/27 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby