购物时,商品加入购物车的飞入效果
我们在购物时,当选定商品后,点击加入购物车,会形成一个产品飞入购物车的效果,这种效果在淘宝上比较常见。如果我们自己做购物网站,是否也可以实现呢:以下是淘宝的效果
思路:要想有这种效果,首先要确定一般来说,有三个参数,一是起始点,二是终点,三是路径
起点很好找,就是鼠标点击的按钮;终点也很好找,就是右侧购物车的图标位置按钮;再一个是路径,这里应该是要导入一个函数,效果按照函数的路径来走,这里涉及到函数的问题,相对要复杂一点,因为函数虽然确定了,但是从函数的哪个坐标开始,这需要确定规则,这是一项比较复杂的工程;
有些东西,虽然可以自己做,但是如果网上有一些可以参考的插件,建议使用插件,这样可以减少很多时间;
下面是我在网上找到的一个插件,在这里贴出来,供大家参考(全文贴出来):这个插件名字叫做 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(),如果不加这部分,当你滚动鼠标时,再去点击“添加到购物车”,你会发现起点位置老是在按钮下方,如果鼠标滚动得太多,你会发现,甚至都看不到飞起的小图标了
转载于:https://www.cnblogs.com/huanying2015/p/9205622.html
购物时,商品加入购物车的飞入效果相关推荐
- 基于jquery fly插件实现加入购物车抛物线动画效果
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- 小程序实现购物车商品飞入效果-贝塞尔曲线动画
看过很多文章,几乎都是JS计算,控制三个点实现,对我菜鸟的我来说太难了,我这边是用来position+CSS3 cubic-bezier() 函数,既然是分享,我会尽量贴完整代码,害,有的博客,没头没 ...
- Android把商品添加到购物车的动画效果(贝塞尔曲线)
当我们写商城类的项目的时候,一般都会有加入购物车的功能,加入购物车的时候会有一些抛物线动画,具体代码如下: 实现效果如图: 思路: 确定动画的起终点 在起终点之间使用二次贝塞尔曲线填充起终点之间的点的 ...
- 写一个循环,不断的问用户想买什么,用户选择一个商品编号,就把对应的商品添加到购物车里,最终用户输入q退出时,打印购物车里的商品列表
写一个循环,不断的问用户想买什么,用户选择一个商品编号,就把对应的商品添加到购物车里,最终用户输入q退出时,打印购物车里的商品列表 写一个循环,不断的问用户想买什么,用户选择一个商品编号,就把对应的商 ...
- java怎么添加商品信息_Javaweb网上商城项目实战(20)添加商品到购物车
原理分析 具体实现 准备工作 有些准备工作在之前已经实现了,这里强调一下,如果没改的自己改一下,已经完成了的也检查一下. 1.在product_list.jsp中修改链接 2.product_info ...
- 基于Apriori算法的购物网站商品推荐系统
基于Apriori算法的购物网站商品推荐系统 目 录 一. 算法内容 3 Step 1 收集用户偏好 3 Step 2 对数据进行预处理 3 Step 3 计算相似度 4 Step 4 找邻居 5 S ...
- UIView的飞入效果
将UIView的最初位置置为窗口之外,然后通过一个动画来实现UIView的飞入效果,固定好进入的位置. [newvision setFrame:CGRectMake(-200,30,175,145)] ...
- python商品总价_【Python基础 | 列表】小实验:实现显示商品,选择商品,将商品加入购物车,得到总价格...
B站学习<Python爬虫技术5天速成>时遇到的小作业,原视频点我 题目如下: 代码如下: products = [["iPhone", 6888], ["M ...
- 面试时如何回答购物车测试步骤?
同学们在面试软件测试工程师的时候如果是一个电商的公司,可能会问到你购物车的测试步骤都有哪些,一个是关于购物车的测试,一个就是支付类的测试,这里小千就来告诉大家购物车测试步骤都有哪些,避免面试的时候不会 ...
最新文章
- R语言使用fs包的file_copy函数、dir_copy函数、link_copy函数将文件、目录、超链接从一个位置拷贝(copy)到另一个位置
- FB壕掷千万办换脸视频检测挑战赛,网友:这是帮Deepfake训练鉴别器吗?
- 【Java操作】IDEA 导入Springboot 项目:
- TCP 和 UDP,哪个更胜一筹
- 视频直播/远程会议中的AI关键技术探索应用
- PHP付费资源下载交易平台网站源码
- 企业文档管理_为什么这么多企业文档如此糟糕?
- 平均值 oj 山东科技大学 c 语言作业
- linux下tail命令的用法,在Linux命令中tail的用法
- java 反译md5加密_Java MD5加密与反编译
- [OpenGL] 太阳镜头光晕效果
- 航空售票管理系统php,航空售票管理系统设计
- matlab 传函将s换为jw,2010MATLAB及控制系统仿真_总复习.ppt
- Handling App Links
- 关于MySql使用索引的分析
- win10系统更新后底部状态栏经常无响应
- (费用流)洛谷P2469 [SDOI2010]星际竞速
- Altium 在PCB重新编号更新到SCH原理图的方法
- remote: HTTP Basic: Access denied的解决方法
- mysql 赋权限_MySQL赋予用户权限命令总结
热门文章
- LDPC译码:和积译码算法(SPA)、最小和算法(MSA)、分层译码算法(LBP)、动态信息更新策略IDS(含RBP、NW-RBP、SVNF-RBP)的MATLAB实现
- 数据结构和算法(二):摘要算法之SHA和MD5
- c语言RLC算法,「百科」1分钟了解RC、RL、RLC电路原理
- 韩国中产的今天!76岁的快递员,70岁的站街女......
- Attention注意力机制–原理与应用
- linux sli 提高效率,性能到底提升几倍?多卡SLI的效率测试
- 实操演示 | 如何将示波器波形保存到U盘
- 应用fiddler,使用har2case 将api参数转成yaml格式
- 计算机二级c语言预测,计算机二级C语言考前预测上机试题及解析
- 乔布斯的简历17.4万拍卖,HR看了想打人