本文介绍了一个简单的HTML页面，该页面使用JavaScript实现通过键盘方向键控制图片在网页中移动的功能。文章详细展示了如何设置HTML结构、CSS样式以及JavaScript代码来响应键盘输入并改变图片的位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<img id="imgid" src="../image/45.jpg"/>
</body>
<script>
img=document.getElementById('imgid');
ys=0;
yv=10;
sx=0;
vx=10;
document.onkeydown=function(event){
kc=event.keyCode;
switch(kc){
//左键
case 37:
sx-=vx;
img.style.left=sx+'px';
break;
//上
case 38:
ys-=yv;
img.style.top=ys+'px';
sx+=vx;
img.style.left=sx+'px';
ys+=yv;
img.style.top=ys+'px';
break;
}
}
</script>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<img id="imgid" src="../image/45.jpg"/>
</body>
<script>
img=document.getElementById('imgid');
ys=0;
yv=10;
sx=0;
vx=10;
document.onkeydown=function(event){
kc=event.keyCode;
switch(kc){
//左键
case 37:
sx-=vx;
img.style.left=sx+'px';
break;
//上
case 38:
ys-=yv;
img.style.top=ys+'px';
break;
//右
case 39:sx+=vx;
img.style.left=sx+'px';
break;
//下
case 40:ys+=yv;
img.style.top=ys+'px';
break;
}
}
</script>
</html>
扫一扫
4765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
