购物车增加、减少商品时动画效果：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" ...
随机推荐
- Qt学习笔记：Qt中使用Lua
今天想在Qt中使用Lua进行数据操作 结果发现在Qt中使用Lua的文章较少,虽然很简单,但是还是写出来提供入门,顺便记录一下 我使用的是Qt Creator 3.4.2,用的是mingw4.9.2的编 ...
- python中os和sys模块的详解
平时在工作中经常会用到os模块和sys模块的一些特性,下面是这些特性的一些相关解释,希望对大家有所帮助 os模块 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os. ...
- iOS开发实用技巧—Objective-C中的各种遍历（迭代）方式
iOS开发实用技巧—Objective-C中的各种遍历(迭代)方式 说明: 1)该文简短介绍在iOS开发中遍历字典.数组和集合的几种常见方式. 2)该文对应的代码可以在下面的地址获得:https:// ...
- iOS7隐藏状态栏 statusBar
转:http://blog.csdn.net/dqjyong/article/details/17896145 评:通过这点变化,可以看出苹果倾向于使用delegate取代全局变量. IOS7中,不仅 ...
- Number Range 管理之并行缓冲
Number Range 管理之并行缓冲: 常用的事务代码SNRO,SM56还有一些业务专用的号码管理,可以在SPRO中查找: SNRO :Number Range 管理 一般的操作是维护号码范围.如 ...
- Maven 简单配置gpg
1. 下载maven到指定目录,指定对应的gpg的执行命令所需要的属性.这里比如下载解压后的maven目录是: C:\maven-apache-3.3.2 ,那么配置文件目录是: C:\maven-a ...
- WIN7只能上QQ打不开网页，使用CMD输入netsh winsock reset
此类问题可以用腾讯电脑管家电脑诊所一键修复,请点击上方的[立即修复]即可. 附:手动修复步骤(来源:腾讯电脑管家电脑诊所,自动修复请点击上方的[立即修复])方案一:手动设置DNS(说明:如果您使用DN ...
- [算法导论]哈希表 @ Python
直接寻址方式: class HashTable: def __init__(self, length): self.T = [None for i in range(length)] class Da ...
- Marza Gift for GDC 2016
这个帖子还是用中文写了,主要是面向国内. 这是一个趋势,就是基于UE.Unity这些日趋完善的游戏引擎以及编辑器制作便宜的3D动画.国内有<超黑学院>这种为代表,还有其他许多国漫,勉强能耐 ...
- 文档大师 搜狗拼音无法输入汉字_乱码的解决方法_VB6程序
文档大师用 搜狗拼音无法输入汉字,显示的内容和输入的内容不一致.解决方法: 把中文输入里面的那个“美式键盘”再删掉就好用了,只保留搜狗输入法即可!