基于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 相关文章推荐
jQuery 树形结构的选择器
Feb 15 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
js实现文字选中分享功能
Jan 25 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
用js实现放大镜效果
Oct 28 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 xml实例 留言本
2009/03/20 PHP
php 读取文件乱码问题
2010/02/20 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
弘扬雷锋精神演讲稿
2014/05/10 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
医院节能减排方案
2014/06/13 职场文书
工作证明格式及范本
2014/09/12 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
个人工作表现自我评价
2015/03/06 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python