前言

js學(xué)習(xí)ing，form（w3c上js微課）

動(dòng)畫

現(xiàn)在我們知道如何選擇和更改DOM元素，我們可以創(chuàng)建一個(gè)簡(jiǎn)單的動(dòng)畫。

讓我們創(chuàng)建一個(gè)簡(jiǎn)單的HTML頁(yè)面，其中包含將使用JS動(dòng)畫的框元素。

<style>

#container {

? ????width: 400px;

? ????height: 400px;

????? background: green;

????? position: relative;

????????????????}

#box {

????? width: 30px;

????? height: 30px;

????? background: red;

? ????position: absolute;

????}

</style>

<div id="container">?

????????<div id="box"> </div>

</div>

我們的box元素在容器元素的內(nèi)部。注意用于元素的 position 屬性：

容器是相對(duì)的，盒子是絕對(duì)的。這將允許我們創(chuàng)建相對(duì)于容器的動(dòng)畫。

我們將會(huì)動(dòng)畫紅色框，使其移動(dòng)到容器的右側(cè)。

步驟

要?jiǎng)?chuàng)建動(dòng)畫，我們需要以較小的時(shí)間間隔更改元素的屬性。

我們可以通過使用?setInterval()?方法來(lái)實(shí)現(xiàn)這一點(diǎn)，它允許我們創(chuàng)建一個(gè)定時(shí)器并調(diào)用一個(gè)以定義的間隔（以毫秒為單位）反復(fù)更改屬性的函數(shù)。

例如：

var t = setInterval(move, 500);?

此代碼創(chuàng)建一個(gè)每500毫秒調(diào)用一個(gè)move()函數(shù)的計(jì)時(shí)器。

現(xiàn)在我們需要定義move()?函數(shù)，改變框的位置。

// 定義開始的位置

var pos = 0;

// 獲取box元素

var box = document.getElementById("box");

function move() {

? pos += 1;

? box.style.left = pos+"px";? ? ? ?//px = pixels

}

注意：提示:?move()?函數(shù)在每次調(diào)用時(shí)將box元素的left屬性增加1。

document 對(duì)象

document對(duì)象是文檔的根節(jié)點(diǎn)，window.document屬性就指向這個(gè)對(duì)象。也就是說，只要瀏覽器開始載入HTML文檔，這個(gè)對(duì)象就開始存在了，可以直接調(diào)用。

JavaScript中有一個(gè)預(yù)定義的 document 對(duì)象，可用于訪問DOM上的所有元素。

換句話說，文檔對(duì)象是網(wǎng)頁(yè)中所有對(duì)象的所有者（或根）。

因此，如果要訪問HTML頁(yè)面中的對(duì)象，則始終訪問?document?對(duì)象。

例如:

document.body.innerHTML = "Some text";

由于 body 是 DOM 的元素，因此我們可以使用 document 對(duì)象訪問它并更改 innerHTML 屬性的內(nèi)容。