js 動畫函式

2021-10-19 22:27:29 字數 515 閱讀 6796

呼叫方法:

animate(obj, target, callback);

animate(物件, 目標值, function() );

function

animate

(obj, target, callback)

呼叫的時候 callback()

// 先清除以前的定時器,只保留當前的乙個定時器執行

clearinterval

(obj.timer)

; obj.timer =

setinterval

(function()

callback &&

callback()

;}// 把每次加1 這個步長值改為乙個慢慢變小的值 步長公式:(目標值 - 現在的位置) / 10

obj.style.left = obj.offsetleft + step +

'px';}

,15);

}

js 變速動畫函式

獲取任意乙個元素的任意乙個屬性的當前的值 當前屬性的位置值 function getstyle element,attr 變速動畫函式封裝增加任意多個屬性和 函式及層級還有透明度 element元素 json物件 儲存屬性與值 fn為 函式 function animate element,json...

js 簡單動畫函式封裝

動畫原理 核心原理 通過定時器setinterval 不斷移動盒子位置 實現步驟 1.獲得當前盒子位置 2.讓盒子在當前位置上加上移動距離 3.利用定時器不斷重複這個操作 4.加乙個結束定時器的條件 5.注意 此元素需要新增定位,才能使用element.style.left 函式封裝 簡單動畫函式封...

JS 封裝跑馬燈動畫函式

通過定時器 setinterval 不斷移動盒子位置 lang en charset utf 8 titletitle divstyle head div let div document.queryselector div obj 目標物件 target 目標位置 function animate...