購物時，商品加入購物車的飛入效果

咱們在購物時，當選定商品後，點擊加入購物車，會造成一個產品飛入購物車的效果，這種效果在淘寶上比較常見。若是咱們本身作購物網站，是否也能夠實現呢：如下是淘寶的效果

 

 

思路：要想有這種效果，首先要肯定通常來講，有三個參數，一是起始點，二是終點，三是路徑

起點很好找，就是鼠標點擊的按鈕；終點也很好找，就是右側購物車的圖標位置按鈕；再一個是路徑，這裏應該是要導入一個函數，效果按照函數的路徑來走，這裏涉及到函數的問題，相對要複雜一點，由於函數雖然肯定了，可是從函數的哪一個座標開始，這須要肯定規則，這是一項比較複雜的工程；

 

有些東西，雖然能夠本身作，可是若是網上有一些能夠參考的插件，建議使用插件，這樣能夠減小不少時間；

下面是我在網上找到的一個插件，在這裏貼出來，供你們參考（全文貼出來）：這個插件名字叫作 fly.js

  1 /*
  2  * jquery.fly
  3  * 
  4  * 拋物線動畫
  5  * @github https://github.com/amibug/fly
  6  * Copyright (c) 2014 wuyuedong
  7  * copy from tmall.com
  8  */
  9 (function ($) {
 10     $.fly = function (element, options) {
 11         // 默認值
 12         var defaults = {
 13             version: '1.0.0',
 14             autoPlay: true,
 15             vertex_Rtop: 20, // 默認頂點高度top值
 16             speed: 1.2,
 17             start: {}, // top, left, width, height
 18             end: {},
 19             onEnd: $.noop
 20         };
 21 
 22         var self = this,
 23             $element = $(element);
 24 
 25         /**
 26          * 初始化組件，new的時候即調用
 27          */
 28         self.init = function (options) {
 29             this.setOptions(options);
 30             !!this.settings.autoPlay && this.play();
 31         };
 32 
 33         /**
 34          * 設置組件參數
 35          */
 36         self.setOptions = function (options) {
 37             this.settings = $.extend(true, {}, defaults, options);
 38             var settings = this.settings,
 39                 start = settings.start,
 40                 end = settings.end;
 41 
 42             $element.css({
 43                 marginTop: '0px',
 44                 marginLeft: '0px',
 45                 position: 'fixed'
 46             }).appendTo('body');
 47             // 運動過程當中有改變大小
 48             if (end.width != null && end.height != null) {
 49                 $.extend(true, start, {
 50                     width: $element.width(),
 51                     height: $element.height()
 52                 });
 53             }
 54             // 運動軌跡最高點top值
 55             var vertex_top = Math.min(start.top, end.top) - Math.abs(start.left - end.left) / 3;
 56             if (vertex_top < settings.vertex_Rtop) {
 57                 // 可能出現起點或者終點就是運動曲線頂點的狀況
 58                 vertex_top = Math.min(settings.vertex_Rtop, Math.min(start.top, end.top));
 59             }
 60 
 61             /**
 62              * ======================================================
 63              * 運動軌跡在頁面中的top值能夠抽象成函數 y = a * x*x + b;
 64              * a = curvature
 65              * b = vertex_top
 66              * ======================================================
 67              */
 68 
 69             var distance = Math.sqrt(Math.pow(start.top - end.top, 2) + Math.pow(start.left - end.left, 2)),
 70                 // 元素移動次數
 71                 steps = Math.ceil(Math.min(Math.max(Math.log(distance) / 0.05 - 75, 30), 100) / settings.speed),
 72                 ratio = start.top == vertex_top ? 0 : -Math.sqrt((end.top - vertex_top) / (start.top - vertex_top)),
 73                 vertex_left = (ratio * start.left - end.left) / (ratio - 1),
 74                 // 特殊狀況，出現頂點left==終點left，將曲率設置爲0，作直線運動。
 75                 curvature = end.left == vertex_left ? 0 : (end.top - vertex_top) / Math.pow(end.left - vertex_left, 2);
 76 
 77             $.extend(true, settings, {
 78                 count: -1, // 每次重置爲-1
 79                 steps: steps,
 80                 vertex_left: vertex_left,
 81                 vertex_top: vertex_top,
 82                 curvature: curvature
 83             });
 84         };
 85 
 86         /**
 87          * 開始運動，可本身調用
 88          */
 89         self.play = function () {
 90             this.move();
 91         };
 92 
 93         /**
 94          * 按step運動
 95          */
 96         self.move = function () {
 97             var settings = this.settings,
 98                 start = settings.start,
 99                 count = settings.count,
100                 steps = settings.steps,
101                 end = settings.end;
102             // 計算left top值
103             var left = start.left + (end.left - start.left) * count / steps,
104                 top = settings.curvature == 0 ? start.top + (end.top - start.top) * count / steps : settings.curvature * Math.pow(left - settings.vertex_left, 2) + settings.vertex_top;
105             // 運動過程當中有改變大小
106             if (end.width != null && end.height != null) {
107                 var i = steps / 2,
108                     width = end.width - (end.width - start.width) * Math.cos(count < i ? 0 : (count - i) / (steps - i) * Math.PI / 2),
109                     height = end.height - (end.height - start.height) * Math.cos(count < i ? 0 : (count - i) / (steps - i) * Math.PI / 2);
110                 $element.css({
111                     width: width + "px",
112                     height: height + "px",
113                     "font-size": Math.min(width, height) + "px"
114                 });
115             }
116             $element.css({
117                 left: left + "px",
118                 top: top + "px"
119             });
120             settings.count++;
121             // 定時任務
122             var time = window.requestAnimationFrame($.proxy(this.move, this));
123             if (count == steps) {
124                 window.cancelAnimationFrame(time);
125                 // fire callback
126                 settings.onEnd.apply(this);
127             }
128         };
129 
130         /**
131          * 銷燬
132          */
133         self.destory = function () {
134             $element.remove();
135         };
136 
137         self.init(options);
138     };
139 
140     // add the plugin to the jQuery.fn object
141     $.fn.fly = function (options) {
142         return this.each(function () {
143             if (undefined == $(this).data('fly')) {
144                 $(this).data('fly', new $.fly(this, options));
145             }
146         });
147     };
148 })(jQuery);

View Code

 

在引入fly.js 以前，要首先引入jquery，由於這個fly.js 是以jquery 爲基礎的

 1   /////拋物效果開始
 2 
 3     $("p.bbox span").click(function (event) {
 4         var oshen = $(this).hasClass("shengji");
 5         // 獲取購物車盒子
 6         var Oulli = $("ul.yigouwu div.qindan ul.gouwu");
 7         // 獲取價格
 8         var a0 = $.trim($(this).parents(".pinbox").find("ul.jia span.jia").html());
 9         // 獲取價格
10         var a1 = $.trim($(this).parents(".pinbox").find("h3 a").html());
11         // 獲取價格
12         var srcimg = $.trim($(this).parents(".pinbox").find("div.imgbox a img").attr("src"));
13         // 獲取購物車中已經存在的商品名稱數組
14         var agouli = getchan_arr();
15 
16         if (oshen) {
17             var index = agouli.indexOf(a1);
18             $("ul.yigouwu div.qindan ul.gouwu li").eq(index).remove();
19             shezhitongji();
20             $(this).removeClass("shengji");
21             $(this).html("當即購買");
22             layer.msg("刪除成功，購物車中已經刪除此商品！");
23         } else {
24             if (agouli.indexOf(a1) == -1) {
25 
26                 var Ochild = creatli(a0, a1, srcimg);
27                 Oulli.append(Ochild);
28                 shezhitongji();
29                 $(this).addClass("shengji");
30                 $(this).html("已選擇");
31 
32                 // 如下是飛入的效果實現
33                 var offset = $("#end").offset();   // 終點位置
34                 var addcar = $(this);
35                 var img = addcar.parents(".pinbox").find('img').attr('src');
36                 var flyer = $('<img class="u-flyer" src="' + img + '">');
37                 var Oscrolltop = $(document).scrollTop();
38                 flyer.fly({
39                     start: {
40                         left: event.pageX, //開始位置（必填）#fly元素會被設置成position: fixed 
41                         top: event.pageY - Oscrolltop - 30, //開始位置（必填） 
42                     },
43                     end: {
44                         left: offset.left + 10, //結束位置（必填） 
45                         top: offset.top + 10 - Oscrolltop, //結束位置（必填） 
46                         width: 0, //結束時寬度 
47                         height: 0 //結束時高度 
48                     },
49                     onEnd: function () { //結束回調 
50                         this.destory(); //移除dom 
51                     }
52                 });
53             } else {
54                 layer.msg("購物車中已經存在此商品了，不建議重複添加，若有另外需求，請到配件升級頁面單獨購買");
55             }
56         }
57     });
58     /////拋物效果結束

 

點擊效果以下：

 

注意：在獲取起點位置的時候，記得加上瀏覽器滾動隱藏起來的部分：$(document).scrollTop()，若是不加這部分，當你滾動鼠標時，再去點擊「添加到購物車」，你會發現起點位置總是在按鈕下方，若是鼠標滾動得太多，你會發現，甚至都看不到飛起的小圖標了