JS上下左右鍵盤控制圖片移動
阿新 • • 發佈：2019-01-09
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖片移動</title>
</head>
<body>
<img id="myimg" src="../../4.jpg" style="left:0px; top:0px; position:absolute"/>
<script>
var img = document.getElementById("myimg");
img.left = 0;
img.top = 0;
document.onkeydown = move;
function move(e){
var k = e.keyCode || e.which;
switch(k){
case 37:
img.left = img.left-10;
break;
case 38:
img.top = img.top-10;
break;
case 39:
img.left = img.left +10;
break;
case 40:
img.top = img.top + 10;
break;
}
return img.style.left = img.left+'px',img.style.top = img.top+'px';
}
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖片移動</title>
</head>
<body>
<img id="myimg" src="../../4.jpg" style="left:0px; top:0px; position:absolute"/>
<script>
var img = document.getElementById("myimg");
img.left = 0;
img.top = 0;
document.onkeydown = move;
function move(e){
var k = e.keyCode || e.which;
switch(k){
case 37:
img.left = img.left-10;
break;
case 38:
img.top = img.top-10;
break;
case 39:
img.left = img.left +10;
break;
case 40:
img.top = img.top + 10;
break;
}
return img.style.left = img.left+'px',img.style.top = img.top+'px';
}
</script>
</body>
</html>