加入购物车的抛物线小球运动效果

参考：http://www.zhangxinxu.com/wordpress/2013/12/javascript-js-%E5%85%83%E7%B4%A0-%E6%8A%9B%E7%89%A9%E7%BA%BF-%E8%BF%90%E5%8A%A8-%E5%8A%A8%E7%94%BB/

我有点没有看懂这个，所以最后自己删减，把重要的内容写下来。 parabola.js这个可以在上面的网址上自己下载。 

首先当然是  

 
  

html页面。点击加入购物车就会把img那个图片以抛物线的形式跳到购物车中

      加入购物车 

                                     
    

      购物车

js内容：

var eleFlyElement = document.querySelector("#flyItem"), eleShopCart = document.querySelector
("#shopCart");

var num=0；

// 抛物线运动
var myParabola = funParabola(eleFlyElement, eleShopCart, {
    speed: 400, //抛物线速度
    curvature: 0.0008, //控制抛物线弧度
    complete: function() {
        eleFlyElement.style.visibility = "hidden";
        
    }
});
// 绑定点击事件
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();            
        });
    });
}