购物抛物线

女爷i 2022-07-27 13:58 108阅读 0赞

# 天猫购物车抛物线 #

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

首先引入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});
    	}
    }

谢谢支持，多少都行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4MzMxNTQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4MzMxNTQ_size_16_color_FFFFFF_t_70]: /images/20220727/93528152c79a41398c5bce3ef93c6242.png

发表评论取消回复

表情：

评论列表（有 0 条评论，108人围观）

还没有评论，来说两句吧...

相关阅读

相关按时间计算抛物线

按时间计算抛物线轨迹 public float time = 2; //代表从A点出发到B经过的时长 public Transform p

落日映苍穹つ/ 2023年10月18日 17:30/ 0 赞/ 8 阅读

相关 Unity抛物线AddForce计算

/findInitialVelocity Finds the initial velocity of a projectile given the init

淡淡的烟草味﹌/ 2023年10月16日 22:19/ 0 赞/ 6 阅读

相关 jquery.fly.js实现添加购物车效果、实现抛物线运动

一、JQuery.fly.js整理 1.Git源代码地址： [https://github.com/amibug/fly][https_github.com_amibug_

深碍√TFBOYSˉ_/ 2022年09月29日 12:57/ 0 赞/ 176 阅读

相关购物抛物线

天猫购物车抛物线真实项目经验购物车抛物线，首先引入js:jquery-1.8.3.min.js、fly.js、requestAnimationFrame.js（用户

女爷i/ 2022年07月27日 13:58/ 0 赞/ 109 阅读

相关抛物线抢红包

![抛物线抢红包][70] <!DOCTYPE HTML> <html> <head> <meta charset="utf-8">

亦凉/ 2022年05月30日 08:42/ 0 赞/ 172 阅读

相关 js绘制抛物线

效果图： ![这里写图片描述][70] 实例主要依赖张鑫旭大神的抛物线js,我稍作了一些改造，具体代码如下。 <!DOCTYPE HTML> <htm

约定不等于承诺〃/ 2022年05月30日 06:48/ 0 赞/ 163 阅读

相关抛物线运动JavaScript实现

html代码 <div id="goods"></div> css代码 { margin: 0;

柔光的暖阳◎/ 2022年05月27日 12:29/ 0 赞/ 176 阅读

相关 CSS3 水平抛物线动画

实现：点击页面任意位置，实现小球抛物线运动。 1、css { padding: 0; margin: 0; } b

秒速五厘米/ 2022年05月21日 03:52/ 0 赞/ 384 阅读

相关 js实现购物车的抛物线

我们经常在电商网站上买东西，当我们将心仪的商品加入购物车时，可能碰到下面的画面。 ![这里写图片描述][70] 注意小球的运动，请自主忽略画技；小球的运动轨迹呈现

布满荆棘的人生/ 2022年05月15日 01:05/ 0 赞/ 220 阅读

相关小程序实现点击加入购物车红点抛物线飘入

[http://ledc.cn/article/9][http_ledc.cn_article_9] 小程序实现点击加入购物车红点抛物线飘入实现效果 !

╰半夏微凉°/ 2022年01月21日 07:07/ 0 赞/ 388 阅读