Jambo JavaScript HTML DOM Anesha

学习使用 JavaScript 来创建 HTML 动画。

基础页面

为了演示如何通过 JavaScript 来创建 HTML 动画，我们将使用一张简单的网页：

Mifano

<!DOCTYPE html>
<html>
<body>
<h1>我的第一部 JavaScript 动画</h1>
<div id="animation">我的动画在这里。</div>
</body>
</html>

创建动画容器

所有动画都应该与容器元素关联。

Mifano

<div id ="container">
    <div id ="animate">我的动画在这里。</div>
</div>

为元素添加样式

应该通过 style = "position: relative" 创建容器元素。

应该通过 style = "position: absolute创建动画元素。

Mifano

#container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
}
#animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
}

Jifunze tena

Mabwana ya mafunzo ya mafunzo

Mafunzo ya mafunzo ya JavaScript inafanywa kwa kubadilisha mabwana ya jicho kwa sababu ya mtafiti.

Tukio hii inatokana na mtafiti wa mtafiti, hivyo mafunzo husikitishwa kama muhimu.

Mabwana ya kuzingatia ni:

Mifano

var id = setInterval(frame, 5);
function frame() {
    if (/* Kuangalia imeshindwa */) {
        clearInterval(id);
    } else {
         /* Mabwana ya kubadilisha stili ya jicho */
    }
}

Tumia JavaScript kuundwa mafunzo

Mifano

function myMove() {
    var elem =  document.getElementById("animate"); 
    var pos = 0;
    var id = setInterval(frame, 5);
     function frame() {
        if (pos ==  350) {
             clearInterval(id);
        } else {
             pos++; 
             elem.style.top = pos + 'px'; 
             elem.style.left = pos + 'px'; 
        }
     }
}

Jifunze tena