jquery 仿天猫加入购物车，小图标慢慢上升消失

首先加载jQuery.js和jquery.fly.min.js插件。
js 文件网上可以下载

1. <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
2. <script type="text/javascript" src="js/jquery.fly.min.js"></script>

然后，一个页面加入购物车按钮

 <input name="addShopCart" type="button" id="addShopCart" class="addcar fu_btn" value="加入购物车" onkeydown="if(event.keyCode==13)return false;" />

一个浮动图片的css

.u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999999;-webkit-transform: translateZ(0);}

最主要的加入购物车js

 var timeout;
$(document).ready(function(){
    //$(function() { 

          $(".addcar").click(function(event){    
            var model= $(".labModel").text();
             $.ajax({
                  url: "ajaxHelp.html", 
                  type: "POST",
                dataType: "text",
                async: false,
                data: {
                    method: "addShopcart",
                    goods_id:$('.goods_id').val(),
                    goodsNum: $('#goodsNum').val(),
                    name: $('.goodsName').val(),
                    specid: $('.specid').val(),
                    model: $('.model').val(),
                    vipPrice:$('.vipPrice').val(),
                    imgUrl:$('.imgUrl').val()
                },
                 success: function(msg){

                    var img =$('#img').attr('src');
                    var flyer = $('<img class="u-flyer" src="'+img+'">'); 

                    var offset = $(".addcar").offset(); 
                    var startLeft=offset.left+50;
                    var startTop=event.pageY-$(document).scrollTop()-50;
                    var endoffset = $("#shopCart").offset(); 
                    var topHeight=endoffset.top-$(window).scrollTop();
                    var leftmargin=endoffset.left+15;
                    if($.browser.msie) { 
                        //alert("IE");
                        startTop=startTop-30;
                        topHeight=topHeight+10;
                        leftmargin=leftmargin+2;
                        //$("#msg1").css('top',280);

                    }
                    if($.browser.mozilla) { 
                        //alert("Firefox");
                        topHeight=topHeight+10;
                        leftmargin=leftmargin;
                        //$("#msg1").css('top',288);
                    }

                    if(window.navigator.userAgent.indexOf('Chrome') != -1) {                        
                       //alert("");
                       if(is360se()){  
                            //alert("360");
                            topHeight=topHeight+10;
                            leftmargin=leftmargin;
                        }else{  

                            //alert("google");
                            //$("#msg1").css('top',320);
                            topHeight=topHeight+10;
                            leftmargin=leftmargin;
                        }  
                        //leftmargin=1566;

                    }
                    if(window.navigator.userAgent.indexOf('TheWorld') != -1) { 
                        //alert("世界之窗");
                        topHeight=topHeight;
                        leftmargin=leftmargin;

                    }

                    $("#msgCart").css('top',topHeight-10);

                    flyer.fly({ 
                        start: { 
                            left: startLeft, //开始位置（必填）#fly元素会被设置成position: fixed 
                            top: startTop//开始位置（必填） 
                        }, 
                        end: { 
                            left: leftmargin, //结束位置（必填） 
                            top: topHeight, //结束位置（必填） 
                            width: 10, //结束时宽度 
                            height: 10 //结束时高度 
                        }, 
                        onEnd: function(){ //结束回调 
                            this.destory();
                            var animateStateTop=topHeight-10;
                            var animateEndTop=topHeight-50;
                            $("#msg").css("top",animateStateTop);
                            $("#msg").show().animate({top:animateEndTop},1000).fadeOut(1000,function(){$("#msg").css("top",animateStateTop);});
                            $("#divCollect").hide();
                            $("#msgCart").show();
                            timeout=setTimeout(function(){$("#msgCart").fadeOut()}, 8000);

                            $(".cart_num").text(msg);
                            $(".gouwuche").text(msg);

                        } 
                    }); 

                 }
                 ,error: function(jqXHR, textStatus, errorThrown) {
                  alert("添加失败;"+jqXHR.responseText);
                 }

              }); 

    }); 
}); 

以上代码即可完成加入购物车效果，是不是很棒啊！Fly插件官网：https://github.com/amibug/fly，另外兼容IE10以下需要添加以下js文件：
演示网站是我做的，如果有不懂的地方可以v我，shisezhe0

<script src="requestAnimationFrame.js"></script>

（演示网址http://www.shisezhe.com/goods-102154.html）