如果用Jquery之類的動畫很難做出拋物線的效果,所以有大神就開發出來了封裝的拋物線運動的插件parabola.js,密碼37t6。
操作很簡單,第一步先引入parabola.js。
教程:
一. 創建你想要的飛行物對象,樣式必須加上position:absolute;
<div id="flyEle"></div>
#flyEle{
position:absolute;
}
二.取到飛行物DOM,以及結束位置的DOM
var eleFlyElement = document.querySelector("#flyEle"),//飛行物
? ? ? eleShopCart = document.querySelector("#shopCart");//結束位置的DOM
三. 拋物線函數的規定
// 拋物線運動
var myParabola = funParabola(eleFlyElement, eleShopCart, {
speed: 400, //拋物線速度
curvature: 0.0008, //控制拋物線弧度
complete: function() { //運動結束后的回調事件
eleFlyElement.style.visibility = "hidden"; //飛行物隱藏
// eleShopCart.querySelector("span").innerHTML = ++numberItem;//右邊購物車圖標里的數字加一
}});
四. 給加入購物車按鈕綁定上事件
// 綁定點擊事件
if (eleFlyElement && eleShopCart) {
[].slice.call(document.getElementsByClassName("btnCart")).forEach(function(button) {
button.addEventListener("click", function(event) {
//判斷按鈕在屏幕當中的位置,適當改變飛行物的飛行弧度
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0,
scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0;
eleFlyElement.style.left = event.clientX + scrollLeft + "px";
eleFlyElement.style.top = event.clientY + scrollTop + "px";
eleFlyElement.style.visibility = "visible";
// 需要重定位
myParabola.position().move();});
});}