recherche

Maison >interface Web >js tutoriel >jQuery simule le partage d'exemples d'effets d'animation de panier d'achat Tmall

jQuery simule le partage d'exemples d'effets d'animation de panier d'achat Tmall

小云云
小云云original
2018-01-10 13:35:502342parcourir

Cliquez sur le bouton Acheter pour simuler une parabole afin d'insérer les articles dans le panier. Après avoir ajouté des articles au panier, une animation +1 s'affichera. L'effet est très bon.Cet article partage principalement avec vous l'effet de simulation jQuery de l'animation du panier Tmall. Les amis qui en ont besoin peuvent s'y référer.

1. Description de la fonction :

1. Cliquez sur le bouton d'achat pour simuler une parabole afin d'insérer les articles dans le panier

2. Après avoir ajouté des articles au panier, l'animation +1 s'affiche

Le rendu est le suivant :

La mise en œuvre est ; comme suit :

1. Importer les packages liés à jquery : 


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

2. Contenu du fichier HTML : 


<!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. Style CSS : 


<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. Code JQuery de base : 


<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>

Recommandations associées :

Vue router imitation Tmall bottom navigation bar exemple de partage

Développement d'applets WeChat grand carrousel imitation Tmall supermarché loterie partage de code d'effet

Obtenez des effets similaires à la roue de loterie et au chapiteau Tmall dans le mini programme

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de la disposition du flux de cascade jQuery MasonryArticle suivant：Explication détaillée de la disposition du flux de cascade jQuery Masonry

Articles Liés

Voir plus