1.1引言
本文介紹下如何使用原生javascript來(lái)實(shí)現(xiàn)運(yùn)動(dòng)效果乘寒，從最基礎(chǔ)的實(shí)例開(kāi)始學(xué)習(xí)，附上各種效果的詳細(xì)示例和演示圖，有需要學(xué)習(xí)該方面的小伙伴可以參考下驹马。
1.2基本原理
通過(guò)改變物體(dom操作對(duì)象)的位置牲蜀，而發(fā)生移動(dòng)變化笆制。
1.3基本方法
（1）運(yùn)動(dòng)的物體使用絕對(duì)定位( position: absolute) 。
（2）通過(guò)改變定位物體的屬性（left各薇、right项贺、top、bottom）值來(lái)使物體移動(dòng)峭判。例如向右或左移動(dòng)可以使用offsetLeft（offsetRight）來(lái)控制左右移動(dòng)开缎。
1.4具體步驟
（1）開(kāi)始運(yùn)動(dòng)前，先清除已有定時(shí)器 （因?yàn)椋菏沁B續(xù)點(diǎn)擊按鈕林螃，物體會(huì)運(yùn)動(dòng)越來(lái)越快,造成運(yùn)動(dòng)混亂）奕删。
（2）開(kāi)啟定時(shí)器，計(jì)算速度疗认。
（3）把運(yùn)動(dòng)和停止隔開(kāi)（if/else),判斷停止條件完残，執(zhí)行運(yùn)動(dòng)。
1.5引入第一個(gè)示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js運(yùn)動(dòng)基礎(chǔ)01</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
position: absolute;
top: 50px;
left: 10px;
background-color: red;
}
</style>
</head>
<body>
<input type="button" value="開(kāi)始運(yùn)動(dòng)" onclick="startMove()">
<div id="box1"></div>
<script type="text/javascript">
function startMove(){
var oDiv=document.getElementById("box1");
setInterval(function(){
oDiv.style.left=oDiv.offsetLeft+10+'px';//這里的10表示運(yùn)動(dòng)的速度
},30)
}
</script>
</body>
</html>
通過(guò)上面的代碼就可以是一個(gè)div塊的物體運(yùn)動(dòng)起來(lái)横漏，那么它實(shí)現(xiàn)的原理是什么呢谨设？
主要通過(guò)這三個(gè)要素實(shí)現(xiàn)：
（1）對(duì)定時(shí)器的使用
（2）給div添加絕對(duì)定位
（3）offsetLeft的使用
