溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jQuery如何模擬實現(xiàn)天貓購物車動畫效果

發(fā)布時間：2021-06-29 10:39:38 來源：億速云 閱讀：226 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了jQuery如何模擬實現(xiàn)天貓購物車動畫效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、功能描述：

   1、點擊購買按鈕，模擬拋物線將物品彈到購物車里；

   2、購物車添加物品后，顯示+1動畫；

效果圖如下：

jQuery如何模擬實現(xiàn)天貓購物車動畫效果

實現(xiàn)如下：

   1、導(dǎo)入jquery相關(guān)的包：

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

  2、html文件內(nèi)容：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQuery實現(xiàn)模擬天貓加入購物車飛入動畫效果</title>
<meta name="keywords" content="jquery,購物車" />
<body>
<div id="main">
  <div class="demo">
    <div class="box orange button addcar">
      <div >
      土豪，請猛擊我，加入購物車
      </div>
    </div>
  </div>
  </div>
  <div class="m-sidebar">
    <div class="cart">
      <i id="end"></i>
      <span>購物車</span>
    </div>
  </div>
</div>
</body>

3、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% '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、核心的JQuery代碼：

<script>
//實現(xiàn)購物車+1動畫效果
(function ($) {
  $.extend({
    tipsBox: function (options) {
      options = $.extend({
        obj: null, //jq對象，要在那個html標簽上顯示
        str: "+1", //字符串，要顯示的內(nèi)容
        startSize: "18px", //動畫開始的文字大小
        endSize: "38px",  //動畫結(jié)束的文字大小
        interval: 600, //動畫時間間隔
        color: "red",  //文字顏色
        callback: function () { }  //回調(diào)函數(shù)
      }, options);
      $("body").append("<span class='num'>" + 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('i').addClass('niceIn');
  setTimeout(function(){
    prop.find('i').removeClass('niceIn');
  },1000);
}
//實現(xiàn)拋物線動畫功能
$(function() {
  var offset = $("#end").offset();
  $(".addcar").click(function(event){
    var addcar = $(this);
    var img = "images/lg.jpg";
    var flyer = $('<img class="u-flyer" src="'+img+'">');
    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='font-family:Microsoft YaHei;'>+1</b>",
            callback: function () {
            }
        });
        niceIn($("#end"));
      }
    });
  });
});
</script>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“jQuery如何模擬實現(xiàn)天貓購物車動畫效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手