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

    

这里用到了第三方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插件使用方法的更多相关文章

  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. 易出错的C语言题目之一：宏定义与预处理

    1.写出下列代码的运行结果: #include<stdio.h> #include<string.h> #define STRCPY(a,b) strcpy(a##_p,#b) ...

  2. 【原】关于使用jieba分词+PyInstaller进行打包时出现的一些问题的解决方法

    错误现象: 最近在做一个小项目,在Python中使用了jieba分词,感觉非常简洁方便.在Python端进行调试的时候没有任何问题,使用PyInstaller打包成exe文件后,就会报错: 错误原因分 ...

  3. 02_Hello World！

    hello word ? 学习任何语言,我们都喜欢在屏幕上直接输出一点什么,作为最简单基本的案例.很多人习惯输出 hello world ,世界你好.感觉很有情况的样子——然而很多人都只停留在这个阶段 ...

  4. 菜鸟学习WCF笔记-契约（Contract)

    契约,契约确保了服务的正常调用,客户端以契约的方式进行服务端调用,而服务则需要按照契约规定的方式提供服务. 契约是服务提供的一组操作的描述 功能上讲:每个操作对应着某个具体的功能实现,以及调用这个操作 ...

  5. JNI技术基础(1)——从零开始编写JNI代码

    众所周知,Java程序的最大特点就是其跨平台的特性,编写的上层应用程序可以不加任何修改甚至不用重新编译而运行于不同的平台上,然而,Java本身也存着这一个弊端,那就是性能上相对要差一些,在对性能要求比 ...

  6. javaweb学习总结(四)——Http协议

    一.什么是HTTP协议 HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的 ...

  7. MyEclipse8.6中提交SVN报错

    上周五(11月27日)的时候,从TortoiseSVN提交项目报错,然后直接从MyEclipse中检出来,修改后提交同样报错. MyEclipse8.6中提交SVN报错,错误提示如下: commit ...

  8. 关于年终奖励的扣税算法BUG

    这么多年,第一次拿年终奖,于是查一下年终奖是怎么扣税的,根据 国税发[2005]9号 适用公式为: 应纳税额＝雇员当月取得全年一次性奖金×适用税率一速算扣除数 年终奖: /= 的税率是3% 按照网上说 ...

  9. spring发送邮件(多人接收或抄送多少带附件发送)

    系统中的附件分享功能界面 抄送多个效果图 多个接收者效果图 抄送多人带附件源码 多个接收者带附件源码

  10. linux下redis设置密码登录

    redis设置密码访问 你的redis在真是环境中不可以谁想访问就可以访问,所以必须要设置密码 设置密码的流程如下: vim  /etc/redis.conf #requirepass foobare ...