js 簡單動畫函式封裝

動畫原理

核心原理：通過定時器setinterval()不斷移動盒子位置

實現步驟：

1.獲得當前盒子位置

2.讓盒子在當前位置上加上移動距離

3.利用定時器不斷重複這個操作

4.加乙個結束定時器的條件

5.注意： 此元素需要新增定位，才能使用element.style.left

函式封裝

//簡單動畫函式封裝obj目標物件 target目標位置
function
animate
(obj, target)
obj.style.left = obj.offsetleft +2+
'px';}
,30);
}//舉例： 
var div = document.
queryselector
('div');
//呼叫函式
animate
(div,
300)
;<
/script>

JS動畫封裝

簡單的運動函式 var demo1 document.getelementbyid demo1 demo1.onmouseover function demo1.onmouseout function var timer 全域性變數 function startmove target else 變速...

JS 封裝跑馬燈動畫函式

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

變速動畫函式封裝

function animate element,attr,target 測試 console.log 目標位置 target 當前位置 current 每次移動的步數 step 20 offset系列 scroll系列 scrollwidth 獲取元素的實際內容的寬度，如果實際內容沒有佔滿一行，獲...