描述：讓頁面中的一個盒子平穩(wěn)向右移動到指定位置

<div id="div1">

<div>

JS代碼實現(xiàn)

<script type="text/javascript">// 實現(xiàn)簡單動畫// 避免獲取類似div1.style.left的值// 且它的值帶有單位pxvar div1 = document.getElementById('div1');var left = 0; // 實時反映元素的x坐標(biāo)值// 讓動畫增加x坐標(biāo)值，使其向右移動var toRight = function() {// 錯誤：每次執(zhí)行時，無需再從div1.style.left獲取x坐標(biāo)的值// 因為已經(jīng)用全局變量left記錄了該信息// left = div1.style.left;// 當(dāng)盒子到達(dá)指定目標(biāo)后，停止動畫if (left < 500) {left += 1;}// 為盒子設(shè)置的新坐標(biāo)值div1.style.left = left + 'px';setTimeout(toRight, 25);};toRight(); // 開始動畫 </script>

去掉注釋后的代碼再看看這幾行代碼

<script type="text/javascript">var div1 = document.getElementById('div1');var left = 0;var toRight = function() {if (left < 500) {left += 1;}div1.style.left = left + 'px';setTimeout(toRight, 25);};toRight(); </script>

小結(jié)：

獲取DOM樣式時，如果樣式在style標(biāo)簽中定義不能通過style對象獲取的，如div1.style.left，但卻可以設(shè)置它的值

在獲取和設(shè)置時，要注意數(shù)值帶有單位（px）

轉(zhuǎn)載于:https://www.cnblogs.com/mackxu/p/animal-first.html

總結(jié)

以上是生活随笔為你收集整理的JS第一个动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。