样例

使用电商 APP 购买商品时，很多都有上图的红色小球抛物线效果，下面通过 jQuery.fly 插件来实现一个简单 Demo。

实现

简单思路：

  1. 确定抛物线的起始和终止位置；
  2. 通过 js 在起始位置创建一个 document 对象，作为红色小球；
  3. 通过 jQuery.fly 插件提供的fly函数来移动小球，移动至终止位置；
  4. 当小球到达终止位置后，通过fly插件提供的 onEnd 回调函数，将小球销毁；

Demo 源码：

<!DOCTYPE html>

<html lang="zh" style="font-size: 46.875px;">

<head>

    <meta charset="UTF-8">

    <title>fly Demo</title>

    <style>

        td {height: 300px;}

        table {width:100%;}

        img {width: 30%;}

    </style>

    <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

    <script type="text/javascript" src="../js/fly.min.js"></script>

    <script type="text/javascript">

        function fly() {

            var x = $("#fashe").offset().left;

            var y = $("#fashe").offset().top;

            pwxTex(x, y);

        }

        // 抛物线特效

        function pwxTex(x, y) {

            var speedI = $("#speedI").val();

            var leftI = $("#b_leftI").val();

            var topI = $("#b_topI").val();

            // 获得目标的偏移量

            var offset = $('#jieshou').offset();

            var div = document.createElement('div');

            div.className = 'pao';

            div.style.cssText = 'transform: translate3d(0, 0, 0);' +

                                'width: 0.75rem;' +

                                'height: 0.75rem;' +

                                'border-radius: 50%;' +

                                'background: red;' +

                                'position: fixed;' +

                                'z-index: 99999999;' +

                                'top:'+x+'px;left:'+y+'px';

            // 将生成的 div 写入 body 标签下

            $('body').append(div);

            // 获得生成的抛物线效果对象

            var flyer = $('.pao');

            var e_leftI = $('#e_leftI').val();

            var e_topI = $('#e_topI').val();

            flyer.fly({

                start: {

                    left: x - leftI,

                    top: y - topI

                },

                end: {

//                  left: (offset.left + $('#jieshou').width() / 2), //结束位置

//                  top: (offset.top + $('#jieshou').height() / 1)

                    left : e_leftI,

                    top : e_topI

                },

                speed: speedI, // 越大越快，默认1.2

                onEnd: function () { // 结束回调

                    $('#jieshou').css({'transform': 'scale(1)'}, 100);

                    this.destory(); // 销毁这个对象

                }

            });

        }

    </script>

</head>

<body>

    <div>

        <table>

            <tr>

                <td>zhengbin.cnblogs.com</td>

                <td>

                    <img id="fashe" src="../img/tank.jpg">

                </td>

            </tr>

            <tr>

                <td>

                    <img id="jieshou" src="../img/lajitong.jpg">

                </td>

                <td>

                    speed：<input id="speedI" type="text" value="2">

                    <br>

                    b_left：<input id="b_leftI" type="text" value="1">

                    <br>

                    b_top：<input id="b_topI" type="text" value="-10">

                    <br>

                    e_left：<input id="e_leftI" type="text" value="100">

                    <br>

                    e_top：<input id="e_topI" type="text" value="500">

                    <br>

                    <button onclick="fly()">飞吧~~</button>

                </td>

            </tr>

        </table>

    </div>

</body>

</html>

Demo 实现效果

jQuery.fly插件实现添加购物车抛物线效果的更多相关文章

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

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

  2. fly插件飞向购物车

    首先载入jQuery库文件和jquery.fly.min.js插件. 插件官方: https://github.com/amibug/fly, 官方例子: http://codepen.io/hzxs ...

  3. jquery自定义插件来实现分页的效果

    本节将介绍如何定义自己的jquery插入,实现分页效果,话不多说,.看看达到的效果: 分页插件 实现的代码例如以下: <!DOCTYPE HTML PUBLIC "-//W3C//DT ...

  4. jQuery改造插件，添加回调函数

    <script language="javascript" type="text/javascript"> function doSomething ...

  5. jquery.fly.min.js 拋物插件

    插件官方: https://github.com/amibug/fly, 官方例子: http://codepen.io/hzxs1990225/full/ogLaVp 首先加载jQuery.js和j ...

  6. FullPage.js-基于 jQuery 的插件全屏滚动插件

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...

  7. jQuery自定义插件

    jQuery自定义插件 jQuery自定义插件按照功能分类,可以分为三类, 1>封装对象方法的插件,(也就是基于某个DOM元素的jQuery对象,局部的) 2>封装全局函数的插件,   ( ...

  8. 21个很棒的jQuery分页插件下载

    分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...

  9. 异步实时搜索jquery select插件

    异步实时搜索jquery select插件 一.先看看效果. 二.做此插件的原因. 1.数据量过大(几千.几万条),无法一次性全部加载. 2.现有插件各不相同,无法满足功能需求. 3.美观性,可控性不 ...

随机推荐

  1. cygwin ctrl+s的问题

    使用cygwin的时候,因为习惯了ctrl+s保存文档,使用vim时也顺手按下去了,然后cygwin就冻结了. 这个时候可以按下 ctrl+q 来重新激活 cygwin

  2. android控件拖动，移动、解决父布局重绘时控件回到原点

    这是主要代码: 保证其params发生改变,相对于父布局的位置就能达到位置移动到原来的位置 // 每次移动都要设置其layout,不然由于父布局可能嵌套listview,当父布局发生改变冲毁(如下拉刷 ...

  3. 如何调试makefile变量

    六.七年前写过一篇<跟我一起写Makefile>,直到今天,还有一些朋友问我一些Makefile的问题,老实说,我有一段时间没有用Makefile了,生疏了.回顾,这几年来大家问题我的问题 ...

  4. ASP.NET 的ClientIDMode属性

    在ASP.NET 4.0之前我们总是要为控件的ClientID头疼,比如明明一个叫lblName的Label放在一个叫做grd的GridView里面后,在页面上改Label的ID就变成了诸如grd_c ...

  5. 【转载】Ajax JS 跨域请求

    原文: 简单的ajax请求:http://blog.csdn.net/net_lover/article/details/5172509 复杂的ajax请求:http://blog.csdn.net/ ...

  6. eclipse热部署配置

    1. 方法一 打开server.xml,找到 比对下:改成下面这样: <Context docBase="dreamlive" path="/ROOT"  ...

  7. A标签href属性详解--记录八

    1.去掉<a>标签的下划线 <ul style=" list-style-type:none; margin:0;color:Gray; font-size:11px;ma ...

  8. ganglia安装 by frank

    作者是frank. 1.安装epelrpm -Uvh http://dl.fedoraproject.org/pub/epel/5/i386/epel-release-5-4.noarch.rpm2. ...

  9. springboot 项目单元测试

    项目结构如下 1 引入测试的 maven 依赖 <dependency> <groupId>org.springframework.boot</groupId> & ...

  10. IIS配置，权限

      2. cd  C:\Windows\Microsoft.NET\Framework64\v4.0.30319 3. aspnet_regiis.exe -i Chen 19:04:42 %wind ...