使用jquery.fly插件实现添加购物车抛物动画

这里引用一个插件：jquery.fly.min.js

Git源码地址：https://github.com/amibug/fly
Demo演示地址：https://codepen.io/hzxs1990225/full/ogLaVp
API使用：

    <script src="jquery.js"></script><script src="dist/jquery.fly.min.js"></script><script>jQuery(function($) {$('#fly').fly({start:{left: 11, //开始位置（必填）#fly元素会被设置成position: fixedtop: 600, //开始位置（必填）},end:{left: 500, //结束位置（必填）top: 130, //结束位置（必填）width: 100, //结束时高度height: 100, //结束时高度},autoPlay: false, //是否直接运动,默认truespeed: 1.1, //越大越快，默认1.2vertex_Rtop: 100, //运动轨迹最高点top值，默认20onEnd: function(){} //结束回调});$('#fly').play(); //autoPlay: false后，手动调用运动$('#fly').destroy(); //移除dom});</script>

HTML演示代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>fly抛物插件</title><style type="text/css">.div1{width: 50px;height: 50px;top: 20%;left: 10%;position: absolute;border: 1px solid;}.end{width: 50px;height: 50px;left: 90%;position: absolute;border: 1px solid;}.shop{top: 30%;position: absolute;}.much{top: 33%;position: absolute;}.but{left: 89.5%;top: 10%;position: absolute;}</style>
</head>
<body><div class="div1" style="background-color: red;"></div><p class="shop" style="left:10.5%">商品1</p><p class="much" style="left:10.5%">￥10</p><div class="div1" style="left: 15%; background-color: yellow;"></div><p class="shop" style="left:15.5%">商品2</p><p class="much" style="left:15.5%">￥20</p><div class="div1" style="left: 20%; background-color: blue;"></div><p class="shop" style="left:20.5%">商品3</p><p class="much" style="left:20.5%">￥30</p><div class="div1" style="left: 25%; background-color: green;"></div><p class="shop" style="left:25.5%">商品4</p><p class="much" style="left:25.5%">￥40</p><div class="div1" style="left: 30%; background-color: cyan;"></div><p class="shop" style="left:30.5%">商品5</p><p class="much" style="left:30.5%">￥50</p><div class="div1" style="left: 35%; background-color: indigo;"></div><p class="shop" style="left:35.5%">商品6</p><p class="much" style="left:35.5%">￥60</p><div class="div1" style="left: 40%; background-color: purple;"></div><p class="shop" style="left:40.5%">商品7</p><p class="much" style="left:40.5%">￥70</p><div class="div1" style="left: 45%; background-color: orange;"></div><p class="shop" style="left:45.5%">商品8</p><p class="much" style="left:45.5%">￥80</p><div class="end"><p>购物车</p><span class="nums" style="color: red;">0</span></div><button class="but">清空购物车</button>
</body>
</html>

演示页面如下：

jQuery演示代码：

这里配合获取鼠标指针位置的属性一起使用，如果有不明白的可以参考：获取鼠标位置坐标

<!-- 引入jquery以及fly插件 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src='./js/jquery.fly.min.js'></script>
<script type="text/javascript">$(function(){// 获取最后购物车的偏移量var end_offset = $(".end").offset();// 监听点击事件$(".div1").click(function(event){// 获取当前元素var thisItem = $(this);// 复制当前元素的副本作为飞过去的示例 // 如果不复制元素直接使用原元素元素会直接飞过去var flyer = thisItem.clone();flyer.fly({// 开始位置start:{left:event.pageX,   //获取当前点击元素相对于左边缘的距离top:event.pageY     //获取当前点击元素相对于右边缘的距离},end: {left: end_offset.left + 10,     //获取购物车元素的左边偏移值top: end_offset.top + 10,       //获取购物车元素的顶边偏移值width: 0,           //元素飞到终点后的宽度height: 0,          //元素飞到终点时的高度},// autoPlay: false, //是否直接运动,默认true// speed: 1.1, //越大越快，默认1.2// vertex_Rtop: 100, //运动轨迹最高点top值，默认20//结束回调onEnd: function(){this.destory(); //销毁抛物体 }});// 获取当前购物车的数量 自增一赋值实现数量加1var num = $(".nums") . text();num++;$(".nums").text(num);});//清空购物车的数量0$(".but").click(function(){$(".nums").text(0);});});
</script>

最终演示效果如下：

使用jquery.fly插件实现添加购物车抛物动画相关推荐

基于jquery fly插件实现加入购物车抛物线动画效果
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
jQuery.fly插件实现添加购物车抛物线效果
样例使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始 ...
jquery.fly.js实现添加购物车效果、实现抛物线运动
一.JQuery.fly.js整理 1.Git源代码地址: https://github.com/amibug/fly 2.Demo演示地址:http://codepen.io/hzxs1990225 ...
“完美”解决微信小程序购物车抛物动画，在连续点击时出现计算错误问题，定时器停不下来。
"完美"解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来. 参考文章: (1)"完美"解决微信小程序购物车抛物动画,在连续点击时出现计 ...
jquery.slimScroll插件 div添加滚动条
项目中左侧菜单栏中子菜单展开时长度过长,导致页面撑开.使用该插件为菜单栏的div加上滚动条 github地址:https://github.com/kujian/jQuery-slimScroll?u ...
android美团的购物车动画,模仿饿了么、美团添加购物车的动画效果
#pragma mark -加入购物车动画 -(void) JoinCartAnimationWithRect:(CGRect)rect { CGFloat _endPoint_x = 35; CGF ...
java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程
摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...
jquery.fly.min.js 拋物插件
插件官方: https://github.com/amibug/fly , 官方例子: http://codepen.io/hzxs1990225/full/ogLaVp 首先加载jQuery.j ...
jQuery实现PC端商城购物车模块基本功能（每个商品的小计和合计都会根据添加和删除的操作来动态计算）
jQuery实现PC端商城购物车模块基本功能先上效果图: 因为主要是想练习jQuery的使用,所以页面CSS部分比较简陋,有需要的话,大家在参考代码时,可以自己再完善下CSS部分的代码,让购物车页面 ...

使用jquery.fly插件实现添加购物车抛物动画

使用jquery.fly插件实现添加购物车抛物动画

HTML演示代码：

jQuery演示代码：

最终演示效果如下：

使用jquery.fly插件实现添加购物车抛物动画相关推荐

最新文章

热门文章