S设置自定义快捷键并实现图片上下左右移动

简单的来看下效果图
是不是感觉很有趣呢
下面就是大家关心的代码咯
HTML

<div align="center" style=" text-align-all: center">
<h1 align="center">修改按键</h1>
<input type="text" id="up" onkeyup="myFunction('up')" maxlength="1">上<br>
<input type="text" id="below " onkeyup="myFunction('below')" maxlength="1">下<br>
<input type="text" id="left" onkeyup="myFunction('left')" maxlength="1">左<br>
<input type="text" id="right " onkeyup="myFunction('right')" maxlength="1">右<br>
<button onclick="show()">确定修改</button>
</div>
<lable id="show"/>
<img id="img" src="a.png" style="width: 80px;height: 80px;position: absolute;left:0px;top: 0px"/>

<script type="text/javascript">//获取图片idvar obj = document.getElementById("img");obj.left = 0;obj.top = 0;var up,below,left,right;var up1,below1,left1,right1;//点击按钮保存输入的键值function show(){up = up1;below = below1;left = left1;right= right1;}//判断上下左右输入框function myFunction(str){if(str=="up") {up1 = event.keyCode ;}if(str=="below") {below1= event.keyCode;}if(str=="left") {left1= event.keyCode;}if(str=="right") {right1 =event.keyCode;}}//移动的关键 function move() {console.log(event.keyCode);if (event.keyCode == parseInt(left)) {//左obj.left -= 80;}if (event.keyCode == parseInt(up)) {//上obj.top -= 80;}if (event.keyCode == parseInt(right)) {//右obj.left += 80;}if (event.keyCode == parseInt(below)) {//下obj.top += 80;}obj.style.left = obj.left + "px", obj.style.top = obj.top + "px";}document.onkeydown = move;
</script>

到这里就要结束咯
这些就是设置按键移动图片的代码咯
关注初级程序程序员不迷路会不断更新哦

S设置自定义快捷键并实现图片上下左右移动相关推荐

8.ubuntu下设置自定义快捷键
Ubuntu下的shutter软件可以用于截图并编辑图片,很好用但是每次截图都要去点击软件或者输入命令 shutter -s,非常不方便,Ubuntu支持自定义快捷键,设置自定义快捷键的方法如下 1 ...
eclipse设置自定义快捷键
eclipse有很多强大且人性化的功能,而各项功能有时又隐藏得比较深(需要点击数次菜单才能找到),而系统提供的快捷键有时比较难记住甚至根本没有提供快捷键时,就需要自己手动设置快捷键了.设置方法有两种, ...
Total Commander如何设置自定义快捷键在当前目录打开ConEmu
Total Commander,简称TC,原名Windows Commander,是Windows平台下功能最强大的全能文件管理器. 自从使用了TC基本上就很少再打开Window的文件夹了,因为TC不 ...
VS Code设置自定义快捷键
一直在用VS Code写Shader,安上插件后语法高亮加方法参数提示,可以说非常友好了,但是为了保持和Visual Studio中快捷键的一致,就需要修改VS Code的快捷键,具体来说我需要自定义 ...
工作笔记::VSCode使用笔记--VSCode 设置自定义快捷键设置自定义运行脚本
之前开发一个软件,使用的是vscode + cmake + mingw三个结合开发的,需要使用vscode 编写代码,然后使用cmake 根据设置好的规则生成makefile 文件,最后使用mingw ...
【AHK】【VBA】word四种设置自定义快捷键的方法
突然发现word有四种设置快捷键的方法,首先介绍的两种是word自带的设置方式:一种是AHK的设置方法,以一个简单例子即可上手:最后一种是方法的合体. 方法一首先是左上角的这个快速工具区,是可以自定 ...
学习TeXworks编辑器（一）自定义快捷键详解
文章目录写在前面快捷键的设置方法按键动作一览表(按选项卡划分) 文件(File)选项卡编辑(Edit)选项卡搜索(Search)选项卡格式(Format)选项卡排版(Typeset)选项 ...
Js自定义快捷键并实现上下左右移动
JS代码实现自定义热键实现功能: 1.自定义上下左右键 2.使用自定义热键或者使用键盘上下左右键移动图片效果图: 代码: <!DOCTYPE html> <html>&l ...
Pycharm自定义快捷键背景图片
1 效果图 2 方法 Pycharm如何设置自定义背景图片 3 快捷键背景图片 png图片类型,保存即可使用,方便查看黑色字体白色字体(这里有张图↓↓↓)在新标签页中打开图片即可看见 4 快捷键命 ...

S设置自定义快捷键并实现图片上下左右移动

S设置自定义快捷键并实现图片上下左右移动相关推荐

最新文章

热门文章