效果图：
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img{
width: 150px;
height: 200px;
扫描二维码关注公众号，回复： 16142801 查看本文章
margin-left: 20px;
margin-top: 10px;
float: left;
position: absolute;
z-index: 999;
}
.f{
border: 1px solid red;
position: relative;
}
.f>div{
position: absolute;
}
.z1{
width: 150px;
height: 200px;
border: 1px solid rebeccapurple;
margin-left: 20px;
top: 400px;
text-align: center;
line-height: 200px;
font-size: large;
color: #6cf;
}
.z2{
width: 150px;
height: 200px;
border: 1px solid rebeccapurple;
margin-left: 20px;
top: 400px;
left: 200px;
text-align: center;
line-height: 200px;
font-size: large;
color: #6cf;
}
.z3{
width: 150px;
height: 200px;
border: 1px solid rebeccapurple;
margin-left: 20px;
top: 400px;
left: 400px;
text-align: center;
line-height: 200px;
font-size: large;
color: #6cf;
}
.z4{
width: 150px;
height: 200px;
border: 1px solid rebeccapurple;
margin-left: 20px;
top: 400px;
left: 600px;
text-align: center;
line-height: 200px;
font-size: large;
color: #6cf;
}
.z5{
width: 150px;
height: 200px;
border: 1px solid rebeccapurple;
margin-left: 20px;
top: 400px;
left: 800px;
text-align: center;
line-height: 200px;
font-size: large;
color: #6cf;
}
</style>
</head>
<body>
<div class="f">
<img id="img1" src="img/关羽.webp" alt="" οnclick="moveB1()">
<img id="img2" src="img/刘协.webp" alt="" οnclick="moveB2()">
<img id="img3" src="img/孙权.webp" alt="" οnclick="moveB3()">
<img id="img4" src="img/曹操.jpg" alt="" οnclick="moveB4()">
<img id="img5" src="img/貂蝉.webp" alt="" οnclick="moveB5()">
<div class="z1">孙权</div>
<div class="z2">貂蝉</div>
<div class="z3">关羽</div>
<div class="z4">刘协</div>
<div class="z5">曹操</div>
</div>
</body>
<script>
let img1=document.getElementById('img1')
let img2=document.getElementById('img2')
let img3=document.getElementById('img3')
let img4=document.getElementById('img4')
let img5=document.getElementById('img5')
function moveChange(img,x,y){
document.οnkeydοwn=function(e){
console.log(e.keyCode)
switch(e.keyCode){
case 38:
y--
img.style.top=y+'px'
break;
case 40:
y++
img.style.top=y+'px'
break;
case 37:
x--
img.style.left=x+'px'
break;
case 39:
x++
img.style.left=x+'px'
break;
}
return
}
}
function moveB1(){
moveChange(img1,0,0)
}
function moveB2(){
moveChange(img2,0,0)
}
function moveB3(){
moveChange(img3,0,0)
}
function moveB4(){
moveChange(img4,0,0)
}
function moveB5(){
moveChange(img5,0,0)
}
</script>
</html>