某些电商网站加入购物车和减少购物车商品数量时，有个小动画，以抛物线形式增减，如图：

    

这里用到了第三方jQuery.Fly.js插件（底层依赖Jquery库，地址：https://github.com/amibug/fly/blob/master/src/fly.js），使用方法直接上代码，自己体验：

引入js库：

  1. <head lang="en">
  2.     <meta charset="UTF-8">
  3.     <title></title>
  4.     <script src="jquery-1.8.0.min.js" type="text/javascript"></script>
  5.     <script src="fly.js" type="text/javascript"></script>
  6. </head>

Html代码：

  1. <body style="text-align: center;">
  2.     <div id="divSource">
  3.         <div>
  4.             <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>
  5.         </div>
  6.         <div>
  7.             <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>
  8.         </div>
  9.         <div>
  10.             <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>
  11.         </div>
  12.     </div>
  13. <div id="divTarget" style="width:60px;height:60px; background: #ddd;margin:20px;">快到碗里来……</div>
  14. </body>

自定义JS代码：

  1. <script type="text/javascript">
  2.     $(function(){
  3.       $("#divSource input[value='add']").bind("click",function(){
  4.             var _sourceImg=$(this).prev();
  5.             var _back=function(){};
  6.             var _target=$("#divTarget");
  7.           objectFlyIn(_sourceImg,_target,_back);
  8.         });
  9.         $("#divSource input[value='remove']").bind("click",function(){
  10.             var _sourceImg=$(this).prev().prev();
  11.             var _back=function(){};
  12.             var _target=$("#divTarget");
  13.             objectFlyOut(_sourceImg,_target,_back);
  14.         });
  15.         /**
  16.          * 对象飞入
  17.          *
  18.          */
  19.         function objectFlyIn(_sourceImg,_target, _back) {
  20.             var addOffset =_target.offset();
  21.  
  22.             var img = _sourceImg;
  23.             var flyer = $('<img style="display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 100000;" src="' + img.attr('src') + '">');
  24.             var X,Y;
  25.  
  26.             if(img.offset()){
  27.                 X = img.offset().left - $(window).scrollLeft();
  28.                 Y = img.offset().top - $(window).scrollTop();
  29.             }
  30.             flyer.fly({
  31.                 start: {
  32.                     left: X + img.width() / 2 - 25, //开始位置（必填）
  33.                     top: Y + img.height() / 2 - 25 //开始位置（必填）
  34.                 },
  35.                 end: {
  36.                     left: addOffset.left + 10, //结束位置（必填）
  37.                     top: addOffset.top + 10, //结束位置（必填）
  38.                     width: 10, //结束时宽度
  39.                     height: 10 //结束时高度
  40.         },
  41.                 onEnd: function () { //结束回调
  42.                     this.destroy(); //移除dom
  43.                     _back();
  44.                 }
  45.             });
  46.  
  47.         }
  48.  
  49.         /**
  50.          * 对象飞出
  51.          *
  52.          */
  53.         function objectFlyOut(_sourceImg,_target, _back) {
  54.             var addOffset = _target.offset();
  55.  
  56.             var img = _sourceImg;
  57.             var flyer = $('<img style="display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 100000;" src="' + img.attr('src') + '">');
  58.  
  59.             flyer.fly({
  60.                 start: {
  61.                     left: addOffset.left, //开始位置（必填）
  62.                     top: addOffset.top //开始位置（必填）
  63.                 },
  64.                 end: {
  65.                     left: addOffset.left-20, //结束位置（必填）
  66.                     top: addOffset.top-20, //结束位置（必填）
  67.                     width: 5, //结束时宽度
  68.                     height: 5 //结束时高度
  69.                 },
  70.                 onEnd: function () { //结束回调
  71.                     this.destroy(); //移除dom
  72.                     _back();
  73.                 }
  74.             });
  75.         }
  76.  
  77.     })
  78. </script>

　　

购物车增加、减少商品时动画效果：jQuery.Fly.js插件使用方法的更多相关文章

  1. 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js

    在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...

  2. 整屏滚动效果 jquery.fullPage.js插件+CSS3实现

    最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...

  3. 用C3中的animation和transform写的一个模仿加载的时动画效果

    用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...

  4. jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。

    jQuery  Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...

  5. 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

    参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...

  6. jquery.autocomplete.js 插件的自定义搜索规则

    这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: ...

  7. jQuery.cookie.js插件了解及使用方法

    jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...

  8. ajax请求执行完成后再执行其他操作（jQuery.page.js插件使用为例）

    就我们做知,ajax强大之处在于它的异步请求,但是有时候我们需要ajax执行彻底完成之后再执行其他函数或操作 这个时候往往我们用到ajax的回调函数,但是假如你不想或者不能把接下来的操作写在回调函数中 ...

  9. 异步上传图片，光用jquery不行，得用jquery.form.js插件

    异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...

随机推荐

  1. LBS定位技术

    http://www.cnblogs.com/LBSer/p/3295642.html LBS定位技术从方法上可分成三类:基于三角关系的定位技术.基于场景分析的定位技术.基于临近关系的定位技术(唐毅和 ...

  2. [读书笔记]C#学习笔记三: C#类型详解..

    前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...

  3. atitit.web的动态include 跟变量传递 java .net php

    atitit.web的动态include 跟变量传递 java .net php 1. 动态include  <jsp:include 1 2. 使用QueryString 1 3. 使用Ses ...

  4. atitit.添加win 系统服务 bat批处理程序服务的法总结instsrv srvany java linux

    atitit.添加win 系统服务 bat批处理程序服务的法总结instsrv srvany  java linux 系统服务不同于普通视窗系统应用程式.不可能简简单单地通过运行一个EXE就启动视窗系 ...

  5. JavaScript 语句 if else

    顺序.分支和循环语句 if(判断条件) {    满足条件要执行的语句 } else {    不满足条件时执行的语句 } 格式一:if(){} 表示如果括号内的值是true,那就执行花括号中的内容, ...

  6. struts2 iterator排序

    因为存入数据库的数据可能不是按照我们想要的方式存进去的.这就导致取出来的时候,不是按照我们想要的方式排序.这时候就要利用struts2的iterator排序功能,按照我们想要的顺序排列. 首先.一个付 ...

  7. 【1】CommonCode快速代码集

    阅读目录 CommonCode是什么? CommonCode包括哪些内容? 版本信息   回到顶部 CommonCode是什么? 简单的说,CommonCode是作者在经历各种"试错&quo ...

  8. 【地图API】地址录入时如何获得准确的经纬度？淘宝收货地址详解

    用户需求:管理者需要录入一批商户,并在地图上把商户展示出来.但发现一些商户的地址描述并不清楚,导致商户位置出错.如何获得更加准确的商户位置呢? 分析:假设地址准确的,可以通过地址解析,得到准确的经纬度 ...

  9. Revit中如何自定义快捷键

    最佳的绘图方式是左手键盘,右手鼠标,使用快捷键将大大提高绘图效率,Revit同样提供了自定义绘图工具快捷键的功能(Revit2011及以后版本),有两种方式调出自定义快捷键窗口,第一种是Revit窗口 ...

  10. 让input支持 ctrl v上传粘贴图片? 让input支持QQ截图或剪切板中的图像数据(Java实现保存)

    原理:监听粘贴 → 获取粘贴内容 → 将内容上传 → 抓取后返回替换至input 我们在生产中用到的界面: 测试地址 http://sms.reyo.cn 用户名:aa 密码:123456 以下是PH ...