<!DOCTYPE html>
<!-- 通过键盘方向键控制图片移动 -->
<html>
<head>
<meta charset="utf-8">
<title>图片移动</title>
<style>
*{
margin: 0;
padding: 0;
}
div{ /*设置主容器样式*/
width: 800px;
height: 600px;
display: inline-block;
position: relative;
background-color: pink;
}
#img1{ /*设置图片样式*/
width: 100px;
height: 100px;
position: absolute;
z-index: 999;
border-radius: 50px;
}
</style>
</head>
<body>
<div id="box1">
<!-- 自定义一张图片 -->
<img id='img1' src="img/sally.jpg" />
</div>
<script>
var jsDiv1 = document.getElementById('box1')
var jsImg = document.getElementById('img1');
var stepx ; //x轴每次移动的象素值
var stepy ; //y轴每次移动的象素值