div在直線上的移動
步驟：
1）首先在body里添加一個div,接着去設置div樣式。為了讓div移動，設置position為absolute，left設置為0，right設置為0。
2）接着我們去清除一下默認樣式。（就是*{} 這部分）。
3）script里的move函數，每次調用時使我的div移動一定的像素。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4）先運行一下，看我的div是否存在，效果圖如下。
5）實現move，在script中做如下修改,可以回瀏覽器看，div此時是水平移動的啦。
<body>
<div></div>
<script type="text/javascript">
var speedX = 3;//在move之外，先有一個水平移動的速度
var div = document.querySelector('div');//方便move隔一小段時間調用
//實現move
function move(){
//在move中取得當前元素所在的left值,調用getComputedStyle傳入div
//注意:left是個字符串,且后面可能跟着px單位,在使用之前先用parseInt解析
var currentLeft = parseInt(window.getComputedStyle(div).left) ;
var currentTop = parseInt(window.getComputedStyle(div).top) ;
var left = currentLeft + speedX;//計算left值
div.style.left = left + 'px';//設置水平移動
}
//調用move函數
setInterval(function(){
move()
},20);
</script>
</body>
6）同理，設置垂直方向上的參數，可以實現垂直方向移動。
var speedY = 4;//垂直方向
var top = currentTop + speedY;//計算top值
div.style.top = top + 'px'; //設置垂直移動
7）斜線運動就是水平方向和垂直方向都設置參數。
