封裝緩動動畫3

2022-07-01 09:57:12 字數 1710 閱讀 7543

前面兩篇都是做了一些關於緩動動畫的基礎，現在，可以在前面的基礎上真正的封裝緩動動畫了。

$("btn").onclick = function () 


}, 20);


};
首先確定需要改變的屬性，並獲取初始值：

function getcssattrvalue(obj, attr) else
其次要根據style[attr]動態改變該元素的值，讓元素運動起來。

因此，我們上面的函式需要稍作修改：

function buffer(obj, attr, target) 


}, 20);


}
還是之前的效果，實現向左向右運動，我們就可以這樣寫了：

function $(id) 


var box = $("box");


$("btn").onclick = function () ;
當然，也可以實現元素的大小改變了：

function $(id) 


var box = $("box");


$("btn1").onclick = function () ;
完整**如下：

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>


title


>


<


style


>


*#box


style


>


head


>


<


body


>


<


button 


id="btn"


>往右走


button


>


<


button 


id="btn1"


>變大

				
js off 緩動動畫
動畫也有很多種，一起來學習，緩動動畫吧 緩動動畫 1 緩動動畫原理 盒子位置 目標盒子位置 現在盒子位置 10 2 步長越來越小 3 讓步長越來越小的公式 步長 目標位置 本身位置 10 var but document.getelementsbytagname button 0 var box d...

				
第59天 緩動動畫封裝函式
這三個函式都是 數學函式 math math.ceil 向上取整天花板 比如說 console.log math.ceil 1.01 結果 是 2 console.log math.ceil 1.9 結果 2 console.log math.ceil 1.3 結果 是 1 math.floor 向...

				
JS緩動動畫原理
class btn300 小劉300button class btn800 小劉800button 小劉div 勻速動畫 就是 盒子當前的offsetleft 固定值 緩動動畫 就是 盒子當前的offsetleft 變化的值 目標值 現在的位置 10 注意步長向上取整 緩動動畫原理 就是讓元素的運動...