商品飞入购物车效果(pc端)
效果图
如果用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();});
});}
