购物抛物线

天猫购物车抛物线

真实项目经验购物车抛物线，

首先引入js:jquery-1.8.3.min.js、fly.js、requestAnimationFrame.js（用户支持IE10一下的浏览器）

引用这段代码就可以实现抛物线

function addCartCommon(event,img){
var offset = $(".gwc").offset();
var flyer = $('<img class="u-flyer" src="'+img+'"/>');
var scrolltop=0;
//判断为了获取浏览器差异的body卷入的高度
if(document.documentElement.scrollTop){
scrolltop=document.documentElement.scrollTop;
}
if(!scrolltop){
scrolltop=document.body.scrollTop;
}
if(!scrolltop){
scrolltop=window.pageYOffset;
}
flyer.fly({
start: {
left: event.pageX, //开始位置（必填）#fly元素会被设置成position: fixed
top: event.pageY-scrolltop-50
},
end: {
left: offset.left,
top: offset.top-scrolltop, //结束位置（必填）
width: 20, //结束时宽度
height: 20 //结束时高度
},onEnd:function(){
$(".u-flyer").remove();
}
});
}

在jsp中

<a href="javascript:;" class="btna" onclick="addToCart(event,this,'${product.id}','${product.minBuyNum}','${product.picture }');">加入购物车</a>

在function 中

function addToCart(event,obj,id,buyCount,img){
productID=id;
var cartList=$.cookie("${_cartCookie}");
var count=0;
if(cartList){
var carts="";
var cart="";
var cartLists="";//重新组合
var flag=true;
if(cartList.indexOf(productID)>-1){
carts=(cartList.match(productID+"a[0-9]*b")[0]).split("a");
cartOld=carts[0]+"a"+carts[1];
cartNew=productID+"a"+(parseInt(carts[1])+parseInt(buyCount))+"b";
cartLists=cartList.replace(cartOld,cartNew);
}else{
cartLists=cartList+productID+"a"+buyCount+"b";
}
cartList=cartLists
$.cookie("${_cartCookie}",cartLists,{expires:${_cartCookieMaxAge},path: '/'});
}else{
var value=productID+"a"+buyCount+"b";
cartList=value;
$.cookie('${_cartCookie}', value, { expires: ${_cartCookieMaxAge},path: '/' });
}
var cartArray=cartList.split("b");
for(var i=0;i<cartArray.length;i++){
if(cartArray[i]){
cartArrays=cartArray[i].split("a");
count+=parseInt(cartArrays[1]);
}
}
$(".shop_gwc i").html(count);
$(".gwc i").html(count);
addCartCommon(event,img);
isRefreshCart=true;
isRefreshRightCart=true;
var right=$('.shop_gwc_pop').css("right");
if(right=="0px"){
$(".gwc").animate({right:0});
$('.shop_gwc_pop').show().animate({right:-270});
}
}