样例

使用电商 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. 基于matplotlib的数据可视化 - 笔记

    1 基本绘图 在plot()函数中只有x,y两个量时. import numpy as np import matplotlib.pyplot as plt # 生成曲线上各个点的x,y坐标,然后用一 ...

  2. Android之内存泄露、内存溢出、内存抖动分析

      内存   JAVA是在JVM所虚拟出的内存环境中运行的,内存分为三个区:堆.栈和方法区.栈(stack):是简单的数据结构,程序运行时系统自动分配,使用完毕后自动释放.优点:速度快.堆(heap) ...

  3. 【转】Markdown 的一些问题

    Markdown 的一些问题 把我之前的博文基本上转换成了 markdown 格式.我发现 markdown 虽然在编辑器里看起来比 HTML 清晰一些,但也有一些不足. 这些 markup 语言的格 ...

  4. JSON.toJSONString中序列化空字符串遇到的坑

    前言 最近在做系统Bug修复时遇到了一个问题,调用其他服务时传递的参数和自己预先的不一致,例如Map中有10条记录,然后使用JSON.toJSONString 包装后进行网络传递,但是通过调试发现接收 ...

  5. Ambari修改主页面方法

    [root@hdp159 ambari-web]# brunch watch --server Oct :: - info: application started on http://localho ...

  6. JDK1.6新特性，基础类库篇，IO支持

    1. JDK1.6中提供了java.io.Console类 JDK1.6中提供了java.io.Console 类专用来访问基于字符的控制台设备.你的程序如果要与Windows下的cmd或者Linux ...

  7. Android应用一般上架流程

    Android App上架所需文件 上架准备  App文件: 1. 安装包 2. 应用商标:图片格式KB. 3. 应用截图(4~6张):图片格式JPG或者PNG.图片大小480*800,且每张大小一致 ...

  8. ios支付宝问题整合

           1. 报错:rsa_private read error : private key is NULL     原因:私钥没有转成PKCS8   解决方法: 1)在RSADataSigne ...

  9. JVM调优之---一次GC调优实战

    某系统反馈『性能抖动,响应时间会突然飙高,TP999 MAX会到3000+』,初步怀疑是JVM FULL GC导致的 STW,观察FULL GC日志默认的JVM参数: -Xms4096m -Xmx40 ...

  10. [Unity3D]Unity3D游戏开发之跑酷游戏项目解说

    大家好,我是秦元培.我參加了CSDN2014博客之星的评选,欢迎大家为我投票,同一时候希望在新的一年里大家能继续支持我的博客. 大家晚上好.我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.c ...