一、功能描述：

1、点击购买按钮，模拟抛物线将物品弹到购物车里；

2、购物车添加物品后，显示一动画；

效果图如下：

实现如下：

1、导入jquery相关的包：

脚本类型=' text/JAVAScript ' src=' http : jquery-2。1 .1 .量滴js '/script script src=' http : jquery。飞吧。量滴js /脚本2、html文件内容：

！DOCTYPE HTMLhtmlheadmeta字符集='utf-8 '元名称=“视口”内容='宽度=设备宽度，初始比例=1,最大比例=1'titlejQuery实现模拟天猫加入购物车飞入动画效果/title meta name=' keywords ' content=' jquery，购物车/body div id=' main ' div class=' demo ' div class=' box orange button addcar ' div style=' padding-top :55 px '土豪，请猛击我，加入购物车/div/div/div/div class=' m-sidebar ' div class=' cart ' I id=' end '/I span购物车/span/div/div/body 3、css样式：

样式类型='text/css ' .演示{ width :820 pxmargin :60 px auto 10px auto } .间位侧边栏{位置：固定；top : 0；右： 0；背景技术： # 000;z指数： 2000；宽度： 85px高度： 100%;font-size : 12pxcolor: # fff}。购物车{ color: # fff文本对齐：居中；线高： 20pxpadding: 200px 0 0 0px }。购物车跨度{显示：块宽度：20 pxmargin:10 0 0 0 }。手推车I { width :50 pxh three :35 px显示：块；背景：url(car.png)不重复；} # msg { position : fixed top :300 pxright :35 pxz指数：10000;宽度：1 px高度：52px线高：52 pxfont-size :20 px文本对齐：居中；color: # fff背景技术： # 360;display:none} .盒子{宽度：300像素高度：150 pxborder:1px实心# e0e0e0文本对齐：居中}。u-flyer { display : }块；宽度： 50px高度： 50px边界半径： 50px位置：固定；z指数： 9999；}.按钮{ display : inline-block；大纲：无；光标：指针；文本对齐：中心；文本装饰：无；font : 16px/100% '微软雅黑'，Arial，Helvetica，无衬线；划水：5 em 2 em。55 emtext-shadow: 0 1px 1px rgba(0，0，0，3);-网络套件-边界-半径：5个em；-蚊子-边界半径：5个em；边界半径：5个em；-web套件-box-shadow : 0 1px 2px rgba(0，0，0，2);-moz-box-shadow : 0 1px 2px rgba(0，0，0，2);box-shadow: 0 1px 2px rgba(0，0，0，2);} .按钮：悬停{ text-decoration : none} .按钮：激活{位置：相对；top: 1px}/*橙色*/。橙色{ color: # fef4e9border:固体1px # da7c0c背景# f78d1dbackground :-web套件-渐变(线性、左上、左下，从(#faa51a)到(# f47a 20))；背景技术：-moz-线性梯度（顶部、#faa51a、# f47a 20)；过滤器： progid : maximagettransform .微软。渐变(startColorstr=' # FAA 51a '，endColorstr=' # f47a 20 ')；} .橙色：悬停{背景： # f47 C20背景：-网络套件-渐变(线性，左上，左下，从(#f88e11)到(# f 06015))；背景：-moz-线性梯度（顶部、#f88e11、# f 06015)；过滤器： progid : maximagettransform .微软。渐变(startcolorst=' # f88 e 11 '，endcolorst=' # f 06015 ')；} .orang e :活动{ color : # fcd 3a 5；背景：-网络套件-渐变(线性、左上、左下，从(#f47a20)到(# FAA 51a))；背景技术：-moz-线性梯度（顶部，#f47a20，# FAA 51a)；过滤器： progid : maximagettransform .微软。渐变(startcolorst=' # f47a 20 '，endcolorst=' # FAA 51a ')；}4、核心的JQuery代码：

脚本/实现购物车一动画效果（函数($) { $。扩展({ tipsBox:函数（选项){ options=$).extend({ obj: null，//jq对象，要在那个超文本标记语言标签上显示str: ' 1 '，//字符串，要显示的内容startSize: '18px '，//动画开始的文字大小endSize: '38px '，//动画结束的文字大小interval: 600，//动画时间间隔颜色： "红色",//文字颜色回拨：函数(){ } //回调函数},选项);$(“正文”).追加(' span class=' num '选项。str '/span ')；var box=$(' .num’)；var left=options.obj.offset().左侧选项。物体。width()/2；var top=options.obj.offset().顶级选项。物体。高度()；盒子。CSS({ ' position ' : ' absolute '，' left': left 'px '，' top': top 'px '，' z-index': 9999，' font-size ' :选项。起始尺寸，“行高”:选项。结束尺寸，‘颜色’:选项。color })；盒子。动画({ ' font-size ' :选项。结束大小，“不透明度”:“0”，“顶部”: top-parsent(选项。end size)' px ' }，options.interval，function(){ box。移除()；选项。回调();});} });})(jQuery)；函数尼辛(道具){道具.找到(' I ').添加CLaSS(' NiSein ')；setTimeout(函数(){ prop.find('i ').移除CLaSS(' NiSein ')；},1000);}//实现抛物线动画功能$(function(){ var offset=$(“# end”).offset()；$('.添加汽车').click(function(event){ var addcar=$(this)；var img=' images/LG。jpg '；var flyer=$(' img class=' u-flyer ' src=' http : ' img ' ')；传单。fly({ start : { left : }事件。pagex，top: event.pageY }，end : { left : offset。左10，top: offset.top 10，width:height : 0 0 }，onEnd: function(){ $ .tipsBox({ obj: $('#end ')，str : ' b style=' font-family : Microsoft YaHei；' 1 '，回调：函数(){ } })；niceIn($(' # end ')；} });});});/script以上所述是小编给大家介绍的jQuery模拟实现天猫购物车动画效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！