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-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
微信小程序实现左右列表联动
May 19 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 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的加密方式及原理
2012/06/14 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
python内存动态分配过程详解
2019/07/15 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
python创建学生成绩管理系统
2019/11/22 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
淘宝活动总结范文
2014/06/26 职场文书
班子四风对照检查材料
2014/08/21 职场文书
个人自查自纠材料
2014/10/14 职场文书
2014年工程工作总结
2014/11/25 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
欠条范文
2015/07/03 职场文书
退伍军人感言
2015/08/01 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
django上传文件的三种方式
2021/04/29 Python