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

});}

                                                             教程结束