样例

使用电商 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. 从语句 char* p="test" 说起

    我相信,使用C/C++多年的人对下面这个字符串赋值语句都不会陌生吧.                 char* p = "test";   同时,我也相信,各位在使用这种语句后吃 ...

  2. 还没被玩坏的robobrowser(4)——从页面上抓取感兴趣的内容

    背景 本节的知识实际上是属于Beautiful Soup的内容. robobrowser支持Beautiful Soup,一般来说通过下面3个方法获取页面上感兴趣的内容 find find_all s ...

  3. linux 调用shell脚本传参

    例子: boolean execResult = true;        BufferedReader br = null;        try        {            //lin ...

  4. jmeter响应信息unicode 编码转成中文

    在jmeter 发送请求过程中,有时候后台返回的是unicode 代码,如: {"status":-1,"msg":"\u63d0\u4ea4\u65 ...

  5. java对存放实体的list进行排序

    java对存放实体的list进行排序: List<DistributionAgentsEntity> allAgents = new ArrayList<DistributionAg ...

  6. 基础001_Xilinx V7资源

    作者:桂. 时间:2018-02-08  09:37:35 链接:http://www.cnblogs.com/xingshansi/p/8430247.html 前言 本文主要是Xilinx V7系 ...

  7. struts2：多模块多配置文件开发

    struts2支持多模块多配置文件开发.下面是一个仅包含两个模块的示范程序,包括财务.仓库模块.它们都有一个“caiwu“的Action,在各自的命名空间下:还有一个从财务转向到仓库的Action. ...

  8. 关于iReport-5.6.0之前版本 “无法启动”或者“一开就关闭”的 某些原因

    在经过Google搜索后.外国的大神说: We don't support Java 8 right now. Support will be added in next versions. 大概意思 ...

  9. AdminLTE, Color Admin

    AdminLTE, Color Adminhttps://github.com/almasaeed2010/AdminLTE/http://www.seantheme.com/color-admin- ...

  10. java.util.Date和java.sql.Date 一点区别

    最近无意中发现,在oracle中同一样的一个Date类型字段,存储的日期格式有两种不同的情况,第一种是2011-1-1 12:00:00,第二种是2011-1-1,仔细查找发现在向数据库中写数据的时候 ...