源码Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<center>
<h3>请自定义上下左右键</h3>
上:<input type="text" id="up" onkeyup="myFunction('up')" maxlength="1" ><br><br>
下:<input type="text" id="down" onkeyup="myFunction('down')" maxlength="1" ><br><br>
左:<input type="text" id="left" onkeyup="myFunction('left')" maxlength="1" ><br><br>
右:<input type="text" id="right" onkeyup="myFunction('right')" maxlength="1" ><br><br>
<button onclick="xuigai()">确定修改</button>
</center>
<label id="show"></label>
<img id="img" src="feiji.jpg" style="width: 100px;height: 100px;position: absolute;left: 0px;top: 0px">
<script type="text/javascript">
var obj = document.getElementById('img');
obj.left = 0;
obj.top = 0;
var up ,down,left,right;
var up1 ,down1,left1,right1;
function xuigai() {
up = up1;
down = down1;
left = left1;
right = right1;
alert(up + ";"+down+";"+left+";"+right);
move();
}
function myFunction(str) {
if (str == "up"){
up1 = event.keyCode;
}
if (str == "down"){
down1 = event.keyCode;
}
if (str == "left"){
left1 = event.keyCode;
}
if (str == "right"){
right1 = event.keyCode;
}
}
function move (){
console.log(event.keyCode);
if(event.keyCode == parseInt(up)) {
//上
obj.top -= 100;
}
if(event.keyCode == parseInt(down)) {
//下
obj.top += 100;
}
if(event.keyCode == parseInt(left)) {
//左
obj.left -= 100;
}
if(event.keyCode == parseInt(right)) {
//右
obj.left += 100;
}
obj.style.left = obj.left + "px",obj.style.top = obj.top + "px";
}
document.onkeydown = move;
</script>
</body>
</html>
公众号:
微信: