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类(纯JS, Ajax模式)
Mar 12 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
element-ui封装一个Table模板组件的示例
Jan 04 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
JAVA/JSP学习系列之四
2006/10/09 PHP
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
python搭建微信公众平台
2016/02/09 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
简单介绍python封装的基本知识
2019/08/10 Python
python剪切视频与合并视频的实现
2020/03/03 Python
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
煤矿安全生产责任书
2014/04/15 职场文书
幼儿生日活动方案
2014/08/27 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
win10更新失败无限重启解决方法
2022/04/19 数码科技