基于jquery fly插件实现加入购物车抛物线动画效果


Posted in Javascript onApril 05, 2016

先给大家展示下效果图:

基于jquery fly插件实现加入购物车抛物线动画效果

在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高。下面介绍基于jquery fly插件实现加入购物车抛物线动画效果。

使用jquery.fly插件很方便时实现抛物线动画加入购物车的功能

一、插件下载

插件官方:https://github.com/amibug/fly

二、载入jQuery库文件和jquery.fly.min.js插件

<script src="jquery.js"></script> 
<script src="jquery.fly.min.js"></script>

三、加入购物车动画飞入效果实例

我们要实现的效果是:当点击“加入购物车”按钮后,商品图片会变成一个缩小的圆球,以按钮为起点,向右侧以抛物线的形式飞出到右侧的购物车里。在飞出之前,我们要获取当前商品的图片,然后调用fly插件,之后的抛物线轨迹都是由fly插件完成,我们只需定义起点和终点左边以及结束后销毁之前的动画。

<div class="container">
<div class="demo clearfix">
<div class="per">
<img src="images/1.jpg" width="180" height="240" alt="图片二"/>
<div class="title">aaa</div>
<a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
</div>
<div class="per">
<img src="images/2.jpg" width="180" height="240" alt="图片二"/>
<div class="title">bbb</div>
<a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
</div>
</div>
</div>
<div class="cart-sidebar">
<div class="cart">
<i id="icon-cart"></i>
<span>购物车</span>
</div>
</div>
<div id="tip">成功加入购物车!</div>
<script>
$(function() { 
var offset = $("#icon-cart").offset(); 
$(".addcart").click(function(event) { 
var img = $(this).parent().children('img').attr('src'); //获取当前点击图片链接 
var flyer = $('<img class="flyer-img" src="' + img + '">'); //抛物体对象 
flyer.fly({ 
start: { 
left: event.pageX,//抛物体起点横坐标 
top: event.pageY //抛物体起点纵坐标 
}, 
end: { 
left: offset.left + 10,//抛物体终点横坐标 
top: offset.top + 10, //抛物体终点纵坐标 
}, 
onEnd: function() { 
$("#tip").show().animate({width: '200px'},300).fadeOut(500);////成功加入购物车动画效果 
this.destory(); //销毁抛物体 
} 
}); 
}); 
});
<script>

备注

IE10以下需要添加以下js:

<script src="requestAnimationFrame.js"></script>

以上所述是针对jquery fly插件实现加入购物车抛物线动画效果,希望对大家有所帮助!

Javascript 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
解读Vue组件注册方式
May 15 Vue.js
JavaScript高级程序设计之变量与作用域
Nov 17 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 #Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 #Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 #Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 #Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 #Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 #Javascript
js拖拽的原型声明和用法总结
Apr 04 #Javascript
You might like
数据库的日期格式转换
2006/10/09 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
js返回前一页刷新本页重载页面
2014/07/29 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
create-react-app安装出错问题解决方法
2018/09/04 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
python利用拉链法实现字典方法示例
2017/03/25 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
实时获取Python的print输出流方法
2019/01/07 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
在C#中如何实现多态
2014/07/02 面试题
课改先进个人汇报材料
2014/01/26 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
个人投资合作协议书
2014/10/12 职场文书
酒店前台岗位职责
2015/04/16 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
Redis如何一键部署脚本
2021/04/12 Redis