Home >Web Front-end >JS Tutorial >jQuery simulates Tmall shopping cart animation effect example sharing

jQuery simulates Tmall shopping cart animation effect example sharing

小云云Original: 2018-01-10 13:35:502308browse

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:

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

2. HTML file content:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQuery实现模拟天猫加入购物车飞入动画效果</title>
<meta name="keywords" content="jquery,购物车" />
<body>
<p id="main">
  <p class="demo">
    <p class="box orange button addcar">
      <p style="padding-top:55px">
      土豪，请猛击我，加入购物车
      </p>
    </p>
  </p>
  </p>
  <p class="m-sidebar">
    <p class="cart">
      <i id="end"></i>
      <span>购物车</span>
    </p>
  </p>
</p>
</body>

3. CSS style:

<style type="text/css">
.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% &#39;Microsoft yahei&#39;,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=&#39;#faa51a&#39;, endColorstr=&#39;#f47a20&#39;);
}
.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=&#39;#f88e11&#39;, endColorstr=&#39;#f06015&#39;);
}
.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=&#39;#f47a20&#39;, endColorstr=&#39;#faa51a&#39;);
}

4. Core JQuery code:

<script>
//实现购物车+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("<span class=&#39;num&#39;>" + options.str + "</span>");
      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(&#39;i&#39;).addClass(&#39;niceIn&#39;);
  setTimeout(function(){
    prop.find(&#39;i&#39;).removeClass(&#39;niceIn&#39;);
  },1000);
}
//实现抛物线动画功能
$(function() {
  var offset = $("#end").offset();
  $(".addcar").click(function(event){
    var addcar = $(this);
    var img = "images/lg.jpg";
    var flyer = $(&#39;<img class="u-flyer" src="&#39;+img+&#39;">&#39;);
    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: "<b style=&#39;font-family:Microsoft YaHei;&#39;>+1</b>",
            callback: function () {
            }
        });
        niceIn($("#end"));
      }
    });
  });
});
</script>

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

The above is the detailed content of jQuery simulates Tmall shopping cart animation effect example sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of jQuery Masonry waterfall flow layoutNext article：Detailed explanation of jQuery Masonry waterfall flow layout

See more

jQuery simulates Tmall shopping cart animation effect example sharing

Related articles