javascript勻速動畫和緩衝動畫詳解
- 高洛峰原創
- 2016-12-09 15:21:361509瀏覽
關於網頁中的動畫，在css3中我們已經可以使用一些屬性快速的做出來，但是有時為了瀏覽器的兼容性我們還是需要使用js來製作網頁中的動畫。
使用js做動畫最重要的一個函數就是setInterval函數，這裡不再贅述，不懂可以直接百度用法。本文主要講動畫的原理已經在製作過程中的重點。
老規矩，先上程式碼，能直接看懂的可以節省時間。
html部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>move</title> <link rel="stylesheet" href="move1.css"> </head> <body> <input type="button" value="匀速移动" id="move1"> <input type="button" value="渐变移动" id="move2"> <div id="box1" class="box"></div> <div id="box2" class="box"></div> <script type="text/javascript" src="move1.js"></script> </body> </html>
css部分：
*{
margin: 0px;
padding: 0px;
}
.box{
width: 100px;
height: 100px;
background-color: green;
position: relative;
margin-top: 10px;
}
js的是，一定要對全局的margin和padding清零，否則的話他在計算的時候初始的margin和padding會影響計算，從而導致有時候運動不停止的情況。
javascript部分程式碼的解析在原始碼中已經很詳細了，以下主要講解原理。
勻速運動：
緩衝運動：
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn