PC,移动端H5实现实现小球加入购物车效果
生活随笔
收集整理的這篇文章主要介紹了
PC,移动端H5实现实现小球加入购物车效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
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/>點(diǎn)擊方框，實(shí)現(xiàn)小球加入購物車效果 </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) {// 默認(rèn)值var defaults = {version: '1.0.0',autoPlay: true,vertex_Rtop: 20, // 默認(rèn)頂點(diǎn)高度top值speed: 1.2,start: {}, // top, left, width, height end: {},onEnd: $.noop};var self = this,$element = $(element);/*** 初始化組件，new的時候即調(diào)用*/self.init = function (options) {this.setOptions(options);!!this.settings.autoPlay && this.play();};/*** 設(shè)置組件參數(shù)*/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');// 運(yùn)動過程中有改變大小if (end.width != null && end.height != null) {$.extend(true, start, {width: $element.width(),height: $element.height()});}// 運(yùn)動軌跡最高點(diǎn)top值var vertex_top = Math.min(start.top, end.top) - Math.abs(start.left - end.left) / 3;if (vertex_top < settings.vertex_Rtop) {// 可能出現(xiàn)起點(diǎn)或者終點(diǎn)就是運(yùn)動曲線頂點(diǎn)的情況vertex_top = Math.min(settings.vertex_Rtop, Math.min(start.top, end.top));}/*** 運(yùn)動軌跡在頁面中的top值可以抽象成函數(shù) 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)),// 元素移動次數(shù)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),// 特殊情況，出現(xiàn)頂點(diǎn)left==終點(diǎn)left，將曲率設(shè)置為0，做直線運(yùn)動。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});};/*** 開始運(yùn)動，可自己調(diào)用*/self.play = function () {this.move();};/*** 按step運(yùn)動*/self.move = function () {var settings = this.settings,start = settings.start,count = settings.count,steps = settings.steps,end = settings.end;// 計(jì)算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;// 運(yùn)動過程中有改變大小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++;// 定時任務(wù)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版本以上
?
轉(zhuǎn)載于:https://www.cnblogs.com/cat520/p/9360911.html
總結(jié)
以上是生活随笔為你收集整理的PC,移动端H5实现实现小球加入购物车效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： GO 从零开始的语法学习二
- 下一篇： 神经网络的基本工作原理