JS設(shè)置自定義快捷鍵并實(shí)現(xiàn)圖片上下左右移動(dòng)

第JS設(shè)置自定義快捷鍵并實(shí)現(xiàn)圖片上下左右移動(dòng)效果圖：

步驟1：

HTML代碼：

!DOCTYPEhtml

html

headlang="en"

metacharset="UTF-8"

title使用自定義按鍵實(shí)現(xiàn)圖片移動(dòng)/title

styletype="text/css"

table{

border-collapse:collapse;

/style

scriptsrc="js/key.js"/script

/head

body

imgid="img"src="img/Koala.jpg"align="center"/

tablealign="center"border="1"

tdalign="center"colspan="2"修改上下左右鍵/td

/tr

td上：/td

tdinputtype="text"onkeyup="myFunction('up')"maxlength="1"/td

/tr

td下：/td

tdinputtype="text"onkeyup="myFunction('down')"maxlength="1"/td

/tr

td左：/td

tdinputtype="text"onkeyup="myFunction('left')"maxlength="1"/td

/tr

td右：/td

tdinputtype="text"onkeyup="myFunction('right')"maxlength="1"/td

/tr

tdalign="center"colspan="2"inputtype="button"value="確定"http://td

/tr

/table

/body

/html

步驟2：

JS：

varup,down,left,right;

varup1,down1,left1,right1;

varobj=document.getElementById("img");

obj.left=0;

obj.top=0;

//通過設(shè)置四個(gè)不同參數(shù)來進(jìn)行判斷

functionmyFunction(str){

varKey=window.event.keyCode;

//當(dāng)str=設(shè)置的參數(shù)時(shí)把key賦值給up1

if(str=="up"){

up1=Key;

if(str=="down"){

down1=Key;

if(str=="left"){

left1=Key;

if(str=="right"){

right1=Key;

//確定函數(shù)事件

functionconfirm(){

//把up1賦值給up

up=up1;

down=down1;

left=left1;

right=right1;

alert("您設(shè)置的熱鍵鍵值為:"+up+";"+down+";"+left+";"+right);

fkey();

functionfkey(){

console.log(event.keyCode);

varKey=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