效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 100px;
height: 100px;
background: url(./timg.jpg) no-repeat center;
background-size: contain;
position: relative;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
// 10px
//229
let box = document.getElementById("box");
// 右側上下左右箭頭一下一下按
window.onkeyup=function(e){
//keyCode : 就是事件對象中的一個屬性名；
let a = getComputedStyle(box);
if(e.keyCode===37){
box.style.left=parseFloat(a.left)-10+"px"
}else if(e.keyCode===38){
box.style.top=parseFloat(a.top)-10+"px"
}else if(e.keyCode===39){
box.style.left=parseFloat(a.left)+10+"px"
}else if(e.keyCode===40){
box.style.top=parseFloat(a.top)+10+"px"
}
}
//adsw 連續動
// window.onkeypress = function (e) {
// e.keyCode === 119 ? box.style.top = (parseFloat(getComputedStyle(box).top) - 10) + "px" : null; //上
// e.keyCode === 115 ? box.style.top = (parseFloat(getComputedStyle(box).top) + 10) + "px" : null;
// e.keyCode === 97 ? box.style.left = (parseFloat(getComputedStyle(box).left) - 10) + "px" : null; //left
// e.keyCode === 100 ? box.style.left = (parseFloat(getComputedStyle(box).left) + 10) + "px" :
// null; //right
// }
</script>
</body>
</html>