基于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页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
firefox插件Firebug的使用教程
Jan 02 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
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 和 MySQL 基础教程(四)
2006/10/09 PHP
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
Prototype ObjectRange对象学习
2009/07/19 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
python列表去重的二种方法
2014/02/14 Python
python模块之StringIO使用示例
2015/04/08 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
成品仓管员工作职责
2013/12/29 职场文书
物理教学随笔感言
2014/02/22 职场文书
竞聘演讲稿
2014/04/24 职场文书
物流管理专业求职信
2014/05/29 职场文书
诚信贷款承诺书
2014/05/30 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
优秀教师个人材料
2014/12/15 职场文书