JavaScript教程全套影片合集：DOM動畫效果

JavaScript 是世界上最流行的指令碼語言。 JavaScript 是屬於 web 的語言，它適用於 PC、膝上型電腦、平板電腦和行動電話。 JavaScript 被設計為向 HTML 頁面增加互動性。 許多 HTML 開發者都不是程式設計師，但是 JavaScript 卻擁有非常簡單的語法。幾乎每個人都有能力將小的 JavaScript 片段新增到網頁中。下面給大家分享下JavaScript教程全套影片合集：DOM動畫效果。

DOM動畫效果

1. 讓一個元素從左至右進行運動

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

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

var t = null;

t = setInterval(function(){

})

運動的終止條件

t = setInterval(function(){終止條件}) // 元素的屬性值 === 目標點

if(dom.attr === target){

clearInterval(t);

}

運動的三要素

1. 起始點

一個運動的起始點其實就是當前元素的位置，我們透過API獲取當前元素的位置，讓這個位置作為運動的起始。

1. 目標速度

DOM動畫效果封裝

單屬性運動框架:

function move( ele , attr , target){

// 1. 關閉開啟定時器;

clearInterval( ele.timer );

ele.timer = setInterval( function(){

// 2. 計算速度;

if(attr === "opacity"){

var iNow = parseInt(getComputedStyle(ele)[attr] * 100); //0 ~ 100

}else{

var iNow = parseInt(getComputedStyle(ele)[attr]); //100

}

var speed = (target - iNow) / 10;

// 3. 速度取整;

if(speed > 0){

speed = Math.ceil(speed);

}else{

speed = Math.floor(speed);

}

if(attr === "opacity"){

ele.style[attr] = (iNow + speed) / 100 ;

}else{

ele.style[attr] = iNow + speed + "px";

}

// 4. 終止條件;

if(iNow === target){

clearInterval(ele.timer);

}

} , 50)