JS实现购物车的添加动画效果

灰太狼 2022-04-22 04:18 786阅读 0赞

**//这块获取的购物车的位置 \#cartN这个是购物车的id**

var offset = $('#cartN').offset();

**//这块是店家添加的时候的时候的操作**

$(".add1").click(function () {
                            var thisItem = $(this);
                            var flyer = thisItem.clone().css({
                                "background": "#3acd17",
                                "color": "#fff",
                                "width": "20px",
                                "height": "20px",
                                "border-radius": "20px",
                                "z-index": "100"
                            });
                            flyer.fly({
                                start: {
                                    width: 20,
                                    height: 20,
                                    left: event.pageX - 20,
                                    top: event.pageY - 20
                                },
                                end: {
                                    left: offset.left + 40,
                                    top: offset.top + 0,
                                    width: 20,
                                    height: 20
                                },
                                onEnd: function () {
                                    this.destory();
                                },
                                speed: 1.1, //越大越快，默认1.2
                                vertex_Rtop: 100,//运动轨迹最高点top值，默认20
                                onEnd: function () {
                                    flyer.remove();
                                } //结束回调
                            });
                            
    
    
                        });

**效果图在下面 是一个弧形的添加**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTcwNjQxNQ_size_16_color_FFFFFF_t_70][]

**要引入jquery.fly.min.js这个js**

/*! fly - v1.0.0 - 2015-03-23
    * https://github.com/amibug/fly
    * Copyright (c) 2015 wuyuedong; Licensed MIT */
    !function(a){a.fly=function(b,c){var d={version:"1.0.0",autoPlay:!0,vertex_Rtop:20,speed:1.2,start:{},end:{},onEnd:a.noop},e=this,f=a(b);e.init=function(a){this.setOptions(a),!!this.settings.autoPlay&&this.play()},e.setOptions=function(b){this.settings=a.extend(!0,{},d,b);var c=this.settings,e=c.start,g=c.end;f.css({marginTop:"0px",marginLeft:"0px",position:"fixed"}).appendTo("body"),null!=g.width&&null!=g.height&&a.extend(!0,e,{width:f.width(),height:f.height()});var h=Math.min(e.top,g.top)-Math.abs(e.left-g.left)/3;h<c.vertex_Rtop&&(h=Math.min(c.vertex_Rtop,Math.min(e.top,g.top)));var i=Math.sqrt(Math.pow(e.top-g.top,2)+Math.pow(e.left-g.left,2)),j=Math.ceil(Math.min(Math.max(Math.log(i)/.05-75,30),100)/c.speed),k=e.top==h?0:-Math.sqrt((g.top-h)/(e.top-h)),l=(k*e.left-g.left)/(k-1),m=g.left==l?0:(g.top-h)/Math.pow(g.left-l,2);a.extend(!0,c,{count:-1,steps:j,vertex_left:l,vertex_top:h,curvature:m})},e.play=function(){this.move()},e.move=function(){var b=this.settings,c=b.start,d=b.count,e=b.steps,g=b.end,h=c.left+(g.left-c.left)*d/e,i=0==b.curvature?c.top+(g.top-c.top)*d/e:b.curvature*Math.pow(h-b.vertex_left,2)+b.vertex_top;if(null!=g.width&&null!=g.height){var j=e/2,k=g.width-(g.width-c.width)*Math.cos(j>d?0:(d-j)/(e-j)*Math.PI/2),l=g.height-(g.height-c.height)*Math.cos(j>d?0:(d-j)/(e-j)*Math.PI/2);f.css({width:k+"px",height:l+"px","font-size":Math.min(k,l)+"px"})}f.css({left:h+"px",top:i+"px"}),b.count++;var m=window.requestAnimationFrame(a.proxy(this.move,this));d==e&&(window.cancelAnimationFrame(m),b.onEnd.apply(this))},e.destroy=function(){f.remove()},e.init(c)},a.fn.fly=function(b){return this.each(function(){void 0==a(this).data("fly")&&a(this).data("fly",new a.fly(this,b))})}}(jQuery);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTcwNjQxNQ_size_16_color_FFFFFF_t_70]: /images/20220422/53d4caf43a39457f920dde35e7390917.png