parabola.js抛物线与加入购物车效果的示例代码(2)

// body <div>  <center>点击加入购物车查看效果</center> <!--动画图片--> <div>  </div> <!--购物车--> <div></div> <span>0</span> <div><!--加入购物车--></div> </div>

// script // 起始位置元素 var imgElement = document.querySelector('#imgElement'), // 终点位置元素 shopCartElement = document.querySelector('#shopCart'), // 购物车数量 proNum = 0; // 初始化抛物线动画 var myParabola = funParabola(imgElement, shopCartElement, { speed: 100,// 每帧移动的像素大小 curvature: 0.005,// 实际指焦点到准线的距离 complete: function () { imgElement.style.visibility = "hidden"; $('.shop-cart-num').text(++proNum); } }); // 绑定加入购物车事件 $('.add-shop-cart').click(function () { // 重置位置 $('#imgElement').css({ left: '70px', bottom: '25px', visibility: 'visible' }); myParabola.position().move(); });

效果图