我们在购物时，当选定商品后，点击加入购物车，会形成一个产品飞入购物车的效果，这种效果在淘宝上比较常见。如果我们自己做购物网站，是否也可以实现呢：以下是淘宝的效果
思路：要想有这种效果，首先要确定一般来说，有三个参数，一是起始点，二是终点，三是路径
起点很好找，就是鼠标点击的按钮；终点也很好找，就是右侧购物车的图标位置按钮；再一个是路径，这里应该是要导入一个函数，效果按照函数的路径来走，这里涉及到函数的问题，相对要复杂一点，因为函数虽然确定了，但是从函数的哪个坐标开始，这需要确定规则，这是一项比较复杂的工程；
有些东西，虽然可以自己做，但是如果网上有一些可以参考的插件，建议使用插件，这样可以减少很多时间；
下面是我在网上找到的一个插件，在这里贴出来，供大家参考（全文贴出来）：这个插件名字叫做 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);