運(yùn)動(dòng)模式:一直保持一個(gè)速度運(yùn)動(dòng),所以顧名思義為均速運(yùn)動(dòng)
原理:每隔一段時(shí)間計(jì)算div距離瀏覽器邊框的距離
分析:每次點(diǎn)擊時(shí)都會(huì)向前移動(dòng)拣播,為了防止每次點(diǎn)擊時(shí)都增加一次速度,需要在點(diǎn)擊之后立馬清除定時(shí)器,使元素保持原有的速度進(jìn)行運(yùn)動(dòng)俐银。如下? ? ??
css代碼:
ps:300px是目標(biāo)點(diǎn)
? ?ps:所有的運(yùn)動(dòng)思路都是基于以上實(shí)現(xiàn)的岔绸,但上面有個(gè)bug理逊,就是當(dāng)目標(biāo)點(diǎn)不是初始速度的倍數(shù)時(shí),運(yùn)動(dòng)不會(huì)停止盒揉,因?yàn)闆]有找到目標(biāo)點(diǎn)晋被,所以還需要進(jìn)行優(yōu)化。那怎么改才能實(shí)現(xiàn)刚盈?使用計(jì)算差值的公式使它停下來? 思路:當(dāng)300 - 295 < 7?時(shí)羡洛,元素左邊距為300px
? ?當(dāng)位置大于目標(biāo)點(diǎn)時(shí),就是元素在目標(biāo)點(diǎn)右邊藕漱,應(yīng)該往左移翘县,就是負(fù)的,均速值也是負(fù)的谴分,元素在目標(biāo)點(diǎn)左邊锈麸,說明是要往右移,值為正的牺蹄。那怎么判斷往左移還是往右移忘伞?第一種方法:目標(biāo)點(diǎn)減當(dāng)前位置如果大于0(300 - 295 > 0),那么往左移沙兰,否則相反氓奈。第二種:當(dāng)前位置大于目標(biāo)點(diǎn)時(shí),往左移鼎天,否則往右移
想要多個(gè)元素調(diào)用同一個(gè)移動(dòng)函數(shù)舀奶,就需要封裝成函數(shù),通過傳參的方式進(jìn)行調(diào)用斋射,如下