HTML部分：
<!DOCTYPE html> <html> <head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>基于jquery.fly模仿天貓拋物線加入購物車特效代碼</title><style>* {margin: 0;padding: 0;list-style: none;}.m-tip {border: 4px solid #ccc;color: #999;width: 1000px;height: 300px;margin: 200px auto;text-align: center;line-height: 30px;padding-top: 100px;cursor: pointer;}.m-sidebar {position: fixed;top: 0;right: 0;background: #000;z-index: 2000;width: 35px;height: 100%;font-size: 12px;color: #fff;}.m-sidebar .cart {color: #fff;text-align: center;line-height: 20px;padding: 200px 0 0 0px;top: 100px;}.m-sidebar .cart span {display: block;width: 20px;margin: 0 auto;}.m-sidebar .cart i {width: 35px;height: 35px;display: block;}.u-flyer {display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;}.circle {width: 10px;height: 10px;background-color: #3c6efd;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;}</style> </head> <body><!--代碼部分begin--> <div class="m-tip">提示：<br/>點擊方框，實現小球加入購物車效果 </div> <div class="m-sidebar"><div class="cart"><i id="end"></i><span>購物車</span></div> </div> <script src="js/jquery-2.1.4.js"></script> <script src="js/jquery.fly.min.js"></script> <script>$('.m-tip').on('click', addCart);function addCart(event) {var offset = jQuery('#end').offset(), flyer = jQuery('<div class="circle"></div>');flyer.fly({start: {left: event.pageX,top: event.pageY},end: {left: offset.left,top: offset.top,width: 20,height: 20}});} </script> <!--代碼部分end--></body> </html>
JS：
/*! fly - v1.0.0 - 2014-12-22 * https://github.com/amibug/fly * Copyright (c) 2014 wuyuedong; Licensed MIT */ (function ($) {$.fly = function (element, options) {// 默認值var defaults = {version: '1.0.0',autoPlay: true,vertex_Rtop: 20, // 默認頂點高度top值speed: 1.2,start: {}, // top, left, width, height end: {},onEnd: $.noop};var self = this,$element = $(element);/*** 初始化組件，new的時候即調用*/self.init = function (options) {this.setOptions(options);!!this.settings.autoPlay && this.play();};/*** 設置組件參數*/self.setOptions = function (options) {this.settings = $.extend(true, {}, defaults, options);var settings = this.settings,start = settings.start,end = settings.end;$element.css({marginTop: '0px', marginLeft: '0px', position: 'fixed'}).appendTo('body');// 運動過程中有改變大小if (end.width != null && end.height != null) {$.extend(true, start, {width: $element.width(),height: $element.height()});}// 運動軌跡最高點top值var vertex_top = Math.min(start.top, end.top) - Math.abs(start.left - end.left) / 3;if (vertex_top < settings.vertex_Rtop) {// 可能出現起點或者終點就是運動曲線頂點的情況vertex_top = Math.min(settings.vertex_Rtop, Math.min(start.top, end.top));}/*** 運動軌跡在頁面中的top值可以抽象成函數 y = a * x*x + b;* a = curvature* b = vertex_top*/var distance = Math.sqrt(Math.pow(start.top - end.top, 2) + Math.pow(start.left - end.left, 2)),// 元素移動次數steps = Math.ceil(Math.min(Math.max(Math.log(distance) / 0.05 - 75, 30), 100) / settings.speed),ratio = start.top == vertex_top ? 0 : -Math.sqrt((end.top - vertex_top) / (start.top - vertex_top)),vertex_left = (ratio * start.left - end.left) / (ratio - 1),// 特殊情況，出現頂點left==終點left，將曲率設置為0，做直線運動。curvature = end.left == vertex_left ? 0 : (end.top - vertex_top) / Math.pow(end.left - vertex_left, 2);$.extend(true, settings, {count: -1, // 每次重置為-1 steps: steps,vertex_left: vertex_left,vertex_top: vertex_top,curvature: curvature});};/*** 開始運動，可自己調用*/self.play = function () {this.move();};/*** 按step運動*/self.move = function () {var settings = this.settings,start = settings.start,count = settings.count,steps = settings.steps,end = settings.end;// 計算left top值var left = start.left + (end.left - start.left) * count / steps,top = settings.curvature == 0 ? start.top + (end.top - start.top) * count / steps : settings.curvature * Math.pow(left - settings.vertex_left, 2) + settings.vertex_top;// 運動過程中有改變大小if (end.width != null && end.height != null) {var i = steps / 2,width = end.width - (end.width - start.width) * Math.cos(count < i ? 0 : (count - i) / (steps - i) * Math.PI / 2),height = end.height - (end.height - start.height) * Math.cos(count < i ? 0 : (count - i) / (steps - i) * Math.PI / 2);$element.css({width: width + "px", height: height + "px", "font-size": Math.min(width, height) + "px"});}$element.css({left: left + "px",top: top + "px"});settings.count++;// 定時任務var time = window.requestAnimationFrame($.proxy(this.move, this));if (count == steps) {window.cancelAnimationFrame(time);// fire callbacksettings.onEnd.apply(this);}};/*** 銷毀*/self.destory = function(){$element.remove();};self.init(options);};// add the plugin to the jQuery.fn object$.fn.fly = function (options) {return this.each(function () {if (undefined == $(this).data('fly')) {$(this).data('fly', new $.fly(this, options));}});}; })(jQuery);
提示：JQ需要用1.9版本以上
?
