簡單的運動封裝函式

在js的學習當中，我們常常會讓元素發生運動，比如說輪播圖的漸變效果，元素的左右隱藏顯示效果等等，我們每次用到運動的時候重新寫一段**特別的麻煩，我就封裝了一段運動函式，每次使用的時候只需要呼叫一下就可以了

#box
<
/style>
"box"
>
<
/div>
// 幀數 :
var box_ele = document.
getelementbyid
("box");
var timer =
null
;// offset獲取元素位置，獲取一次即可;
var box_left = box_ele.offsetleft;
// 速度提取出來 ; 
var speed =3;
// 目標點 ;
var target =
555.5
; timer =
setinterval
(function()
},30)
;<
/script>

上面這段**已經可以實現簡單的元素從左到右的運動，但是和我們的目標點有一些誤差，這是因為速度可能不一定會被我們所定的距離整除，這樣就會產生一定的誤差，解決辦法很簡單，我們可以送他一把：

if
( math.
abs( target - box_left )
<= math.
abs(speed)
)

當我們設定的目標點和元素當前距離只差小於速度的時候，我們直接讓元素的當前位置等於目標點。

當我們將運動行為放置在乙個事件之中時，要在開啟定時器之前，先關閉定時器，不然使用者多次觸發事件時，會造成速度越來越快。甚至元素超出了他的限制範圍

"box"
>
<
/button>
<
/div>
// 幀數 :
var box_ele = document.
getelementbyid
("box");
var btn = document.
queryselector
("button");
var timer =
null
;// offset獲取元素位置，獲取一次即可;
var box_left = box_ele.offsetleft;
// 速度提取出來 ; 
var speed =3;
// 目標點 ;
var target =
500;
btn.
onclick
=function()
},30)
;}<
/script>

根據上述**進行總結之後簡單的封裝：

function
animate
( target , speed )
else},
30)}

輸入的target是目標到達的位置，speed是元素的速度，將這兩個引數傳遞進來之後，可以根據元素現在的位置和目標點的距離求出速度的正負，如果速度大於了目標點和當前位置只差就直接讓元素到達，反之則當前位置 inow += speed；根據不斷的除錯完善這個封裝我們可以多輸入乙個引數，比如元素的width或者是height屬性，讓元素達到變形的效果

#box
"box"
>
<
/div>
function
animate
( target , attr , speed )
else},
30)} box_ele.
addeventlistener
("mouseover"
,function()
)

function
animate
( ele , attr_options , callback )
}// 關閉開啟定時器;
clearinterval
( ele.timer )
; ele.timer =
setinterval
(function()
clearinterval
(ele.timer)
;typeof callback ===
"function"
?callback()
:"";}
else}}
,30)}

簡單的運動封裝函式

JS運動緩衝的封裝函式

簡單翻譯函式封裝

緩衝運動以及方法的封裝

簡單的運動封裝函式

JS運動緩衝的封裝函式

簡單翻譯函式封裝

緩衝運動以及方法的封裝

相關推薦