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 getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
基本DOM节点操作
Jan 17 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 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 Hex RGB颜色值互换的使用
2013/05/10 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
深入分析PHP设计模式
2020/06/15 PHP
理解JSON:3分钟课程
2011/10/28 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
python DataFrame 修改列的顺序实例
2018/04/10 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
在django模板中实现超链接配置
2019/08/21 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
工程师求职简历的自我评价分享
2013/10/10 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
小学生植树节活动总结
2014/07/04 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
MySQL库表名大小写的选择
2021/06/05 MySQL