购物抛物线

天猫购物车抛物线

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

首先引入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" οnclick="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});
	}
}

作者：恨_别离 本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利，尊重原创，人人有责。