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

参考：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这个可以在上面的网址上自己下载。 

首先当然是  

  <script src="js/jquery-1.9.1.min.js"></script>

   <script src="js/parabola.js"></script>

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

      <div  class="add_cart_large btnCart">加入购物车  </div>                                     

     <div id="flyItem" class="fly_item"><img src="img/dot.png" width="10" height="10"/></div>

      <div  id="shopCart">购物车</div>

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();            

        });

    });

}