射流研究…代码实现自定义热键

实现功能：

1.自定义上下左右键

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

效果图：

步骤1:

超文本标记语言代码：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title使用自定义按键实现图片移动/title style type='text/css '表格{边框-塌陷：塌陷；}/style脚本src=' http : js/key。js '/脚本/头体img id=' img ' src=' http : img/Koala。jpg ' align=' center ' style=' width : 80px；高度： 80px绝对位置：left :0 pxtop : 0px '/table align=' center ' border=' 1 ' tr TD align=' center ' colspan=' 2 '修改上下左右键TD/tr/tr上：/TD tdinput type=' text ' on key up=' my FuncTion(' up ')' maxlength=' 1 '/TD/tr tr TD下：/TD tdinput type=' text ' on key up=' my function(' down ')' maxlength=' 1 '/TD/tr tr TD左：/TD TD input type=' text ' on key up=' my FuncTion '(左)' maxlength=' 1 '/TD/tr tr TD右：/TD TD TD输入类型=' text ' on key up=' my FuncTion(' right ')' maxlength=' 1 '/TD/tr TD align=' center ' colspan=' 2 '输入类型=' button ' value='确定onclick=' confirm()'//TD/tr/table/body/html步骤2:

JS:

上下左右变化；var up1，down1，left1，right1var obj=document。getelementbyid(' img ')；物体。left=0；物体。top=0；//通过设置四个不同参数来进行判断函数我的函数{变量键=窗口。事件。键码；//当str=设置的参数时把键赋值给up1 if(str==' up '){ up1=Key；} if(str==' down '){ down 1=Key；} if(str==' left '){ left 1=Key；} if(str==' right '){ right 1=Key；}}//确定函数事件函数确认(){ //把up1赋值给向上向上=向上1向下=向下1;左=左1;右=右1警报('您设置的热键键值为： '向上；向下；'左；'右);fkey()；}函数fkey(){ console。日志(事件。键码)；var Key=窗口。事件。键码；//获取你自定义的键和键盘上下左右键都可以用if(Key==37 | | Key==解析器(左)){ //左物体。左-=80；} if(Key==38 | | Key==parsent(up)){//上物体。top-=80；} if(Key==39 | | Key==parsent(右)){ //右obj . left=80 } if(Key==40 | | Key==parsent(向下)){ //下obj . top=80 } obj . style . left=obj . left ' px '，obj。风格。top=obj。顶部“px”；} document.onkeydown=fkey总结

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