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 相关文章推荐
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
js实现多图左右切换功能
Aug 04 Javascript
js仿微博动态栏功能
Feb 22 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 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 定界符格式引起的错误
2011/05/24 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
实例讲解php数据访问
2016/05/09 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
jQuery中:gt选择器用法实例
2014/12/29 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
pandas的object对象转时间对象的方法
2018/04/11 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
西安当代医院管理研究院笔试题
2015/12/11 面试题
介绍一下RMI的基本概念
2016/12/17 面试题
建筑工程实习自我鉴定
2013/09/19 职场文书
社会实践感言
2014/01/25 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
春季运动会加油词
2015/07/18 职场文书
教师教育教学随笔
2015/08/15 职场文书
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
Echarts如何重新渲染实例详解
2022/05/30 Javascript