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

<div id="div1">

<div>

JS代碼實(shí)現(xiàn)

<script type="text/javascript">// 實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫// 避免獲取類似div1.style.left的值// 且它的值帶有單位pxvar div1 = document.getElementById('div1');var left = 0; // 實(shí)時(shí)反映元素的x坐標(biāo)值// 讓動(dòng)畫增加x坐標(biāo)值，使其向右移動(dòng)var toRight = function() {// 錯(cuò)誤：每次執(zhí)行時(shí)，無需再從div1.style.left獲取x坐標(biāo)的值// 因?yàn)橐呀?jīng)用全局變量left記錄了該信息// left = div1.style.left;// 當(dāng)盒子到達(dá)指定目標(biāo)后，停止動(dòng)畫if (left < 500) {left += 1;}// 為盒子設(shè)置的新坐標(biāo)值div1.style.left = left + 'px';setTimeout(toRight, 25);};toRight(); // 開始動(dòng)畫 </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樣式時(shí)，如果樣式在style標(biāo)簽中定義不能通過style對(duì)象獲取的，如div1.style.left，但卻可以設(shè)置它的值

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

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

總結(jié)

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

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