三国英雄归位

二价亚铁.

已于 2023-07-06 17:47:08 修改

阅读量89

点赞数 3

文章标签： javascript html

于 2023-07-06 17:46:02 首次发布

本文链接：https://blog.csdn.net/2201_75506216/article/details/131582137

版权

效果图：

案例代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

img{

width: 150px;

height: 200px;

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>