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 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 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
360通用php防护代码(使用操作详解)
2013/06/18 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
python实现输入数字的连续加减方法
2018/06/22 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
美国创意之家:BulbHead
2017/07/12 全球购物
安全生产先进个人材料
2014/02/06 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
改革共识倡议书
2014/08/29 职场文书
爱国主义影片观后感
2015/06/18 职场文书
初中毕业生感言
2015/07/31 职场文书
入党后的感想
2015/08/10 职场文书
小学中队委竞选稿
2015/11/20 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python