需要用到的js：parabola.js
下載地址：parabola.js
壓縮版：parabola-min.js
進(jìn)入頁面直接另存為即可，就是這么簡單粗暴。也建議您拷貝到本地使用，盡量不要直接從站點外鏈地址。一旦外鏈請求超過忍受程度，會加上這么一句js代碼：document.body.insertAdjacentHTML("afterBegin", '<a href="ooxxooxxooxxooxx-huluwa.mp4">老板和秘書的激情戰(zhàn)斗720x480.mp4</a>');
Demo演示
其他實物Demo：
您可以狠狠地點擊這里：商品拋物線飛到購物車效果demo
parabola.js說明
該拋物線方法名為funParabola，您可以根據(jù)自己的喜好修改，參數(shù)以及基本使用如下：
var myParabola = funParabola(element, target, options);
關(guān)于myParabola:
直接執(zhí)行funParabola方法是不會產(chǎn)生運動的。因為，實際上funParabola執(zhí)行返回的是一個對象。包含如下四個方法：
1、mark 在目標(biāo)元素以及移動元素上通過data-center自定義屬性標(biāo)記當(dāng)前的中心坐標(biāo)，如-234, -345. 此方法主要用在demo中，方便測試與預(yù)覽用的。實際可能用途不大。
2、position 重新獲取元素的位置。在元素相對位置改變的時候，此方法很有用。否則會出現(xiàn)計算誤差的情況。例如，頁面布局是自適應(yīng)或者響應(yīng)式的，瀏覽器寬度變小了，兩元素之間的距離變化了，此時需要執(zhí)行下position，存儲新的坐標(biāo)位置。
3、move 觸發(fā)拋物線運動。
4、init 初始化方法。實際上就是連續(xù)調(diào)用position, mark, move3個方法。
demo點擊頁面任意位置觸發(fā)拋物線運動就是這么觸發(fā)的：
/* 元素 */
var element = document.getElementById("element"),
target = document.getElementById("target");
// 拋物線元素的的位置標(biāo)記
var parabola = funParabola(element, target).mark();
// 拋物線運動的觸發(fā)
document.body.onclick = function() {
element.style.marginLeft = "0px";
element.style.marginTop = "0px";
parabola.init();
};
options參數(shù)說明：
element表示移動的元素，例如demo中的小球球。原生DOM節(jié)點
target表示目標(biāo)元素。例如demo中的橢圓形的大便池。原生DOM節(jié)點
options為可選參數(shù)。各個API名稱以及含義如下：
speed 表示每幀移動的像素大小，每幀（對于大部分顯示屏）大約16~17毫秒。默認(rèn)大小是166.67。也就是默認(rèn)10px/ms.
curvature 可以近似理解為拋物線的開頭大小，也就是曲率。正數(shù)表示開口向下。默認(rèn)大小是0.001. 數(shù)值越大，開頭越小，弧度越高。因為web頁面動輒大小幾百像素，因此，曲率值較小。
progress 表示拋物線運動過程中的回調(diào)，支持兩個參數(shù)，x, y，表示當(dāng)前的坐標(biāo)，您可以根據(jù)這些坐標(biāo)值做一些特殊的處理。
complete 表示拋物線運動結(jié)束后的回調(diào)。
其他說明：
1、可選參數(shù)speed不是指x軸的位移，也不是y軸位移，而是拋物線特定坐標(biāo)的切線距離。利用切線公式：y'=2ax+b就可以計算出x軸這一幀應(yīng)該移動的距離。形成奔向目的地的運動效果。
2、funParabola方法不依賴任何JS框架。您可以大膽使用。如果您使用的是demo源代碼中的funParabola
方法。如果您想低版本IE瀏覽器也有效果，需要再調(diào)用后面這個JS: requestAnimationFrame.js, 很少量的JS代碼，主要做兼容處理的。因此，您可以可以直接拷貝出來。
