jQuery simulates Tmall shopping cart animation effect example sharing

Click the purchase button to simulate a parabola to pop items into the shopping cart. After adding items to the shopping cart, a +1 animation will be displayed. The effect is very good. This article mainly shares with you the jQuery simulation effect of Tmall shopping cart animation. Friends who need it can refer to it. I hope it can help everyone.

1. Function description:

1. Click the purchase button to simulate a parabola to pop items into the shopping cart;

2. After adding items to the shopping cart, the +1 animation is displayed;

The rendering is as follows:

The implementation is as follows:

1. Import jquery related packages:

2. HTML file content:

## jQuery实现模拟天猫加入购物车飞入动画效果 土豪，请猛击我，加入购物车

购物车

3. CSS style:

.demo{width:820px; margin:60px auto 10px auto} .m-sidebar{position: fixed;top: 0;right: 0;background: #000;z-index: 2000;width: 85px;height: 100%;font-size: 12px;color: #fff;} .cart{color: #fff;text-align:center;line-height: 20px;padding: 200px 0 0 0px;} .cart span{display:block;width:20px;margin:10 0 0 0;} .cart i{width:50px;height:35px;display:block; background:url(car.png) no-repeat;} #msg{position:fixed; top:300px; right:35px; z-index:10000; width:1px; height:52px; line-height:52px; font-size:20px; text-align:center; color:#fff; background:#360; display:none} .box{width:300px; height:150px; border:1px solid #e0e0e0; text-align:center} .u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;} .button { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 16px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-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); } .button:hover { text-decoration: none; } .button:active { position: relative; top: 1px; } /* orange */ .orange { color: #fef4e9; border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top, #faa51a, #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); } .orange:hover { background: #f47c20; background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); background: -moz-linear-gradient(top, #f88e11, #f06015); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); } .orange:active { color: #fcd3a5; background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); background: -moz-linear-gradient(top, #f47a20, #faa51a); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); }

4. Core JQuery code:

//实现购物车+1动画效果 (function ($) { $.extend({ tipsBox: function (options) { options = $.extend({ obj: null, //jq对象，要在那个html标签上显示 str: "+1", //字符串，要显示的内容 startSize: "18px", //动画开始的文字大小 endSize: "38px", //动画结束的文字大小 interval: 600, //动画时间间隔 color: "red", //文字颜色 callback: function () { } //回调函数 }, options); $("body").append(" " + options.str + " "); var box = $(".num"); var left = options.obj.offset().left + options.obj.width() / 2; var top = options.obj.offset().top - options.obj.height(); box.css({ "position": "absolute", "left": left + "px", "top": top + "px", "z-index": 9999, "font-size": options.startSize, "line-height": options.endSize, "color": options.color }); box.animate({ "font-size": options.endSize, "opacity": "0", "top": top - parseInt(options.endSize) + "px" }, options.interval, function () { box.remove(); options.callback(); }); } }); })(jQuery); function niceIn(prop){ prop.find('i').addClass('niceIn'); setTimeout(function(){ prop.find('i').removeClass('niceIn'); },1000); } //实现抛物线动画功能 $(function() { var offset = $("#end").offset(); $(".addcar").click(function(event){ var addcar = $(this); var img = "images/lg.jpg"; var flyer = $(' '); flyer.fly({ start: { left: event.pageX, top: event.pageY }, end: { left: offset.left+10, top: offset.top+10, width: 0, height: 0 }, onEnd: function(){ $.tipsBox({ obj: $("#end"), str: " +1 ", callback: function () { } }); niceIn($("#end")); } }); }); });

Related recommendations:

vue router imitates Tmall bottom navigation bar example sharing

WeChat applet development big carousel imitation Tmall supermarket lottery effect code sharing

In the mini program, effects similar to the big turntable and marquee of Tmall lottery are realized