代码如下展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快捷键移动图片效果</title>
</head>
<body>
<img id="img" src="1.jpg" style="width: 100px;height: 100px;position: absolute;left:0px;top: 0px"/>
<center>
<h1>自定义快捷键</h1>
<input type="text" onkeyup="myFunction('up') " maxlength="1">上<br/>
<input type="text" onkeyup="myFunction('below') " maxlength="1">下<br/>
<input type="text" onkeyup="myFunction('left') " maxlength="1">左<br/>
<input type="text" onkeyup="myFunction('right') " maxlength="1">右<br/>
<input type="button" value="确认修改" onclick="ensure()">
</center>
</body>
</html>
js代码:
<script type="text/javascript">
var key = document.getElementById("img");
key.left = 0;
key.top = 0;
var up, below, left, right;
var up1, below1, left1, right1;
function ensure() {
up = up1;
below = below1;
left = left1;
right = right1;
alert(up + ";" + below + ";" + left + ";" + right);
move();
}
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)) {
//左
key.left -= 100;
}
if (event.keyCode == parseInt(up)) {
//上
key.top -= 100;
}
if (event.keyCode == parseInt(right)) {
//右
key.left += 100;
}
if (event.keyCode == parseInt(below)) {
//下
key.top += 100;
}
key.style.left = key.left + "px", key.style.top = key.top + "px";
}
document.onkeydown = move;
</script>