JS设置自定义快捷键并实现图片上下左右移动 - 行业资讯

实现功能:

1。自定义上下左右键
　　

2。使用自定义热键或者使用键盘上下左右键移动图片

效果图:

步骤1:

HTML代码:

　　　　　　& lt; !DOCTYPE html> 　　& lt; html> 　　& lt;头lang=癳n”比; 　　& lt;元charset=皍tf - 8”比; 　　& lt; title>使用自定义按键实现图片移动& lt;/title> 　　& lt;风格类型=" text/css "比; 　　表{ 　　border-collapse:崩溃; 　　} 　　& lt;/style> 　　& lt;脚本src=" https://www.yisu.com/zixun/js/key.js "祝辞& lt;/script> 　　& lt;/head> 　　& lt; body> 　　& lt; img id=癷mg src=" https://www.yisu.com/zixun/img/Koala.jpg "对齐="中心"/比; 　　& lt;表一致="中心"边境=?”比; 　　& lt; tr> 　　& lt; td对齐="中心" colspan=?”在修改上下左右键& lt;/td> 　　& lt;/tr> 　　& lt; tr> 　　& lt; td>上:& lt;/td> 　　& lt; td> & lt;输入类型=拔谋尽弊畲蟪ざ??”祝辞& lt;/td> 　　& lt;/tr> 　　& lt; tr> 　　& lt; td>下:& lt;/td> 　　& lt; td> & lt;输入类型=拔谋尽弊畲蟪ざ??”祝辞& lt;/td> 　　& lt;/tr> 　　& lt; tr> 　　& lt; td>左:& lt;/td> 　　& lt; td> & lt;输入类型=拔谋尽弊畲蟪ざ??”祝辞& lt;/td> 　　& lt;/tr> 　　& lt; tr> 　　& lt; td>右:& lt;/td> 　　& lt; td> & lt;输入类型=拔谋尽弊畲蟪ざ??”祝辞& lt;/td> 　　& lt;/tr> 　　& lt; tr> 　　& lt; td对齐="中心" colspan=?”祝辞& lt;输入类型=鞍磁ァ奔壑?" https://www.yisu.com/zixun/确定”/祝辞& lt;/td> 　　& lt;/tr> 　　& lt;/table> 　　& lt;/body> 　　& lt;/html> 　　　　

步骤2:

　　JS:

　　　　　　var上,下,左,右, 　　var up1、down1 left1 right1; 　　var obj=. getelementbyid (img); 　　obj。左=0; 　　obj。顶级=0;//通过设置四个不同参数来进行判断　　函数myFunction (str) { 　　var关键=window.event.keyCode;//当str=设置的参数时把钥匙赋值给up1 　　如果(str==跋蛏稀?{ 　　up1=关键; 　　} 　　如果(str==跋蛳隆?{ 　　down1=关键; 　　} 　　如果(str==白蟆?{ 　　left1=关键; 　　} 　　如果(str==罢贰?{ 　　right1=关键; 　　} 　　}//确定函数事件　　功能确认(){//把up1赋值给了=up1;=down1; 　　左=left1; 　　正确的=right1; 　　alert("您设置的热键键值为:" +了+”;“+了+”;“+了+”;“+右); 　　fkey (); 　　} 　　函数fkey () { 　　console.log (event.keyCode); 　　var关键=window.event.keyCode;//获取你自定义的键和键盘上下左右键都可以用　　如果(键==37 | |关键==方法(左)){//左　　obj。左-=80; 　　} 　　如果38(关键==| |关键==方法用于(){//上　　obj。最高-=80; 　　} 　　如果(键==39 | |关键==方法(右)){//右　　obj。+=80; 　　} 　　如果(关键==40 | |关键==方法(下)){//下　　obj。+=80; 　　} 　　obj.style。左=obj。左+“px”, obj.style。=obj。+“px”; 　　} 　　文档。onkeydown=fkey; 　　　　

以上所述是小编给大家介绍的JS设置自定义快捷键并实现图片上下左右移动,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
　　如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!