PC,移动端H5实现实现小球加入购物车效果
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 callback settings.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版本以上
