divが直線的に移動します
ステップ：
1）まず、体内でのdivを追加し、divのスタイルを設定するに進みます。DIVを移動させるために、絶対位置を設定し、左0右に設定されている、0。
2）その後、我々は、デフォルトのスタイルをクリアするために見えます。（* {}この一部）。
移動中3）スクリプト関数は、私の動き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）、移動を実現するスクリプトで次の変更を行い、あなたがブラウザに見ることができ、この時点での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）対角移動は、水平方向と垂直方向をパラメータに設定されています。