基于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 &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
CocosCreator入门教程之网络通信
Apr 16 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
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP小教程之实现链表
2014/06/09 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
python对url格式解析的方法
2015/05/13 Python
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
python实现简易版计算器
2020/06/22 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
python getpass模块用法及实例详解
2019/10/07 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
交通法规咨询中心工作职责
2013/11/27 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
中班开学寄语
2014/04/04 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
酒店采购员岗位职责
2015/04/03 职场文书