如何在网页中使图片上下左右移动呢？
其实很简单，用 onkeydown 就可以实现了
onkeydown 是Web 开发中处理键盘输入的重要工具之一，它影响用户键盘操作能力。
先准备一张图片，放入 HBuilder这个编译器的图片文件夹里（img），然后新建一个html文件，接下来在<body></body>里加入一个标签，在用<script><script>里加入方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function demodown(e){
let val=e.keyCode; //w:87 s:83 a:65 d:68
let obj=document.getElementById("img1");
let top=obj.style.top;
let left=obj.style.left;
if(val==87){//向上
let t=(Number(top.substr(0,top.length-2))-50)+"px";
obj.style.top=t;
}else if(val==83){//向下
let t=(Number(top.substr(0,top.length-2))+50)+"px";
obj.style.top=t;
}else if(val==65){//向左
let l=(Number(left.substr(0,left.length-2))-50)+"px";
obj.style.left=l;
}else{//向右
let l=(Number(left.substr(0,left.length-2))+50)+"px";
obj.style.left=l;
}
}
</script>
</head>
<body onkeydown="demodown(event);">
<img id="img1" src="img/1.jpg" style="position: absolute;top: 100px;left: 100px;width: 100px;height: 50px;" />
</body>
</html>let t=(Number(top.substr(0,top.length-2))-50)+"px" ：显示了长度或位置转换成数字类型，做运算
绝对定位用 position: absolute
964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
