购物车增加、减少商品时动画效果：jQuery.Fly.js插件使用方法
某些电商网站加入购物车和减少购物车商品数量时，有个小动画，以抛物线形式增减，如图：
这里用到了第三方jQuery.Fly.js插件（底层依赖Jquery库，地址：https://github.com/amibug/fly/blob/master/src/fly.js），使用方法直接上代码，自己体验：
引入js库：
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="fly.js" type="text/javascript"></script>
</head>
Html代码：
<body style="text-align: center;">
<div id="divSource">
<div>
<img src="http://images.yummy77.com/img/111012/111012068/g1_150_6.jpg"></img><input type="button" VALUE="add"></input><input type="button" VALUE="remove"></input>
</div>
<div>
<img src="http://images.yummy77.com/img/111011/111011111/g1_150.jpg"></img><input type="button" VALUE="add"></input><input type="button" VALUE="remove"></input>
</div>
<div>
<img src="http://images.yummy77.com/img/211110/211110060/g1_150.jpg"></img><input type="button" VALUE="add"></input><input type="button" VALUE="remove"></input>
</div>
</div>
<div id="divTarget" style="width:60px;height:60px; background: #ddd;margin:20px;">快到碗里来……</div>
</body>
自定义JS代码：
<script type="text/javascript">
$(function(){
$("#divSource input[value='add']").bind("click",function(){
var _sourceImg=$(this).prev();
var _back=function(){};
var _target=$("#divTarget");
objectFlyIn(_sourceImg,_target,_back);
});
$("#divSource input[value='remove']").bind("click",function(){
var _sourceImg=$(this).prev().prev();
var _back=function(){};
var _target=$("#divTarget");
objectFlyOut(_sourceImg,_target,_back);
});
/**
* 对象飞入
*
*/
function objectFlyIn(_sourceImg,_target, _back) {
var addOffset =_target.offset(); var img = _sourceImg;
var flyer = $('<img style="display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 100000;" src="' + img.attr('src') + '">');
var X,Y; if(img.offset()){
X = img.offset().left - $(window).scrollLeft();
Y = img.offset().top - $(window).scrollTop();
}
flyer.fly({
start: {
left: X + img.width() / 2 - 25, //开始位置（必填）
top: Y + img.height() / 2 - 25 //开始位置（必填）
},
end: {
left: addOffset.left + 10, //结束位置（必填）
top: addOffset.top + 10, //结束位置（必填）
width: 10, //结束时宽度
height: 10 //结束时高度
},
onEnd: function () { //结束回调
this.destroy(); //移除dom
_back();
}
}); } /**
* 对象飞出
*
*/
function objectFlyOut(_sourceImg,_target, _back) {
var addOffset = _target.offset(); var img = _sourceImg;
var flyer = $('<img style="display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 100000;" src="' + img.attr('src') + '">'); flyer.fly({
start: {
left: addOffset.left, //开始位置（必填）
top: addOffset.top //开始位置（必填）
},
end: {
left: addOffset.left-20, //结束位置（必填）
top: addOffset.top-20, //结束位置（必填）
width: 5, //结束时宽度
height: 5 //结束时高度
},
onEnd: function () { //结束回调
this.destroy(); //移除dom
_back();
}
});
} })
</script>
购物车增加、减少商品时动画效果：jQuery.Fly.js插件使用方法的更多相关文章
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- 整屏滚动效果 jquery.fullPage.js插件+CSS3实现
最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...
- 用C3中的animation和transform写的一个模仿加载的时动画效果
用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...
- jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
- 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)
参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...
- jquery.autocomplete.js 插件的自定义搜索规则
这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: ...
- jQuery.cookie.js插件了解及使用方法
jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...
- ajax请求执行完成后再执行其他操作（jQuery.page.js插件使用为例）
就我们做知,ajax强大之处在于它的异步请求,但是有时候我们需要ajax执行彻底完成之后再执行其他函数或操作 这个时候往往我们用到ajax的回调函数,但是假如你不想或者不能把接下来的操作写在回调函数中 ...
- 异步上传图片，光用jquery不行，得用jquery.form.js插件
异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...
随机推荐
- (转)雅虎WEB前端网站优化 -- 34条军规
雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). 1.Minimize HTTP Requests 减少HTTP请求 ...
- duilib进阶教程 -- 改进List控件 (16)
一.控件隐藏后,允许用代码操作所有行为. 在做播放器的时候,最常用的功能莫过于顺序播放.随机播放了,而当我们切换歌曲的时候,显然应该选中该歌曲,List的选中函数是SelectItem,但是调用此函数 ...
- paip.批处理清理java项目冗余jar的方法
paip.批处理清理java项目冗余jar的方法 在myeclipse中开发的java项目遇到jar包冗余情况,如何删除项目中的冗余jar包啊?项目很大jar包一百多个. 2010-09-14 14: ...
- MySQL的几种连接 join/inner join/cross join/逗号/left join/right join/natural join
转载请注明出处!! 之前数据表连接操作多使用逗号或者join,对几种连接的概念一直浑浑噩噩,最近研究了一波,把这些连接的区别搞明白了. 连接:A xjoin B(主表 操作 关联表) selec ...
- NMAP 基础教程
原文地址: http://drops.wooyun.org/tips/2002 0x00 nmap 介绍 Nmap (网络映射器)是由 Gordon Lyon设计,用来探测计算机网络上的主机和服务的 ...
- GTD时间管理（1）---捕获搜集
前一段时间感觉自己的整个思路很混乱,每一天觉得自己有很多事情很多,但是坐着做着不知道自己做了多少,做项目的时候做着做着时常东想西想.我个人觉得这种想法是不对经的. 于是在google上都出去寻找这方面 ...
- mysql5.5 uuid做主键与int做主键的性能实测
数据库:mysql5.5 表类型:InnoDB 数据量:100W条 第一种情况: 主键采用uuid 32位. 运行查询语句1:SELECT COUNT(id) FROM test_varchar; 运 ...
- 使用6to5，让今天就来写ES6的模块化开发！
http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...
- vc 实现打印功能
Visual C++6.0是开发Windows应用程序的强大工具,但是要通过它实现程序的打印功能,一直是初学者的一个难点,经常有朋友询问如何在VC中实现打印功能,他们往往感到在MFC提供的框架内实现这 ...
- [LeetCode] Longest Increasing Subsequence
Longest Increasing Subsequence Given an unsorted array of integers, find the length of longest incre ...