1. 前言
在网页设计中，图片是一个非常重要的元素。有时我们需要通过js控制图片的移动。本文将介绍如何使用js实现html中的图片移动。
2. css定位
在实现图片移动之前，需要先了解css中定位的相关知识。
2.1 定位
CSS中有三种定位方式：
static：静态定位，元素默认的定位方式。元素在文档流中静态地绘制
relative：相对定位，相对于元素本身的起始位置进行定位
absolute：绝对定位，相对于父元素（非static定位）进行定位
2.2 top、left、bottom、right
定位时常用的属性为top、left、bottom、right。对于静态定位的元素，这些属性是没有用的。相对定位和绝对定位的元素，可以通过设置这四个属性的值来控制元素的位置。
/* 设置为相对定位，并向下移动20像素，向右移动50像素 */
position:relative;
top:20px;
left:50px;
/*设置为绝对定位，并在父元素的底部与右侧边框之间定位*/
position:absolute;
bottom:0;
right:0;
3. js控制图片移动
了解css定位后，我们可以使用js来控制图片的移动。
3.1 获取元素
首先，我们需要获取需要移动的图片元素。可以通过document.getElementById()方法获取相应的元素。
var img = document.getElementById('image');
3.2 控制位置
接下来，我们可以通过js来控制图片的位置。
/* 向下移动20像素 */
img.style.top = '20px';
/* 向右移动50像素 */
img.style.left = '50px';
/* 移动到指定位置 */
img.style.top = '100px';
img.style.left = '200px';
需要注意的是，将元素的定位属性设置为相对定位或绝对定位后，才能通过js来控制其位置。
4. 示例代码
下面是一个使用js控制图片移动的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>图片移动示例</title>
<style type="text/css">
#image {
position: relative;
}
</style>
</head>
<body>
<img id="image" src="https://img.hyhcdn.com/ic/img/logo.png" alt="">
<script type="text/javascript">
var img = document.getElementById('image');
img.style.top = '100px';
img.style.left = '200px';
</script>
</body>
</html>
将上述代码保存为html文件，通过浏览器打开，就可以看到图片被移动到指定的位置。
5. 总结
本文介绍了如何使用js控制html中的图片移动。了解css定位和js控制元素位置，可以更好的掌握网页布局的技巧。