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

<div id="div1">

<div>

JS代碼實現

<script type="text/javascript">// 實現簡單動畫// 避免獲取類似div1.style.left的值// 且它的值帶有單位pxvar div1 = document.getElementById('div1');var left = 0; // 實時反映元素的x坐標值// 讓動畫增加x坐標值，使其向右移動var toRight = function() {// 錯誤：每次執行時，無需再從div1.style.left獲取x坐標的值// 因為已經用全局變量left記錄了該信息// left = div1.style.left;// 當盒子到達指定目標后，停止動畫if (left < 500) {left += 1;}// 為盒子設置的新坐標值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>

小結：

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

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

轉載于:https://www.cnblogs.com/mackxu/p/animal-first.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。