样例

使用电商 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. SharePoint 2013 Backup Farm Automatically With a Powershell and Windows Task Schedule

    In this post,I will show you SharePoint 2013 How to Backup Farm Automatically with a PowerShell and ...

  2. python 动态属性

    先来看一下一个常见的Python类的定义: class Person(object): name = None age = None def __init__(self,name,age): self ...

  3. Mysql show processlist 排查问题

    一.命令概述: mysql show full processlist 用来查看当前线程处理情况,具体信息请参考官网:https://dev.mysql.com/doc/refman/5.7/en/s ...

  4. hive元数据研究

    hive的元数据存放在关系型数据库中,元数据中存储了hive中所有表格的信息,包括表格的名字,表格的字段,字段的类型,注释.这些信息分散的存放在各个表中,给定一个hive中的表格名字,查询这个表中含有 ...

  5. 关于python中__name__=='__main__'的解释

    调用文章是:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/0014318451 ...

  6. logstash 中多行合并

    这里我之前是在input里面配置的多行合并,合并语法为: input { beats { type => beats port => 7001 codec => multiline ...

  7. Intellij Idea生成serialVersionUID的方法

    默认情况下Intellij IDEA是关闭了继承了java.io.Serializable的类生成serialVersionUID的警告.如果需要ide提示生成serialVersionUID,那么需 ...

  8. UI控件篇——UIPageControl及其自定义

    UIPageControl类提供一行点来指示当前显示的是多页面视图的哪一页.当然,由于UIPageControl类可视样式的点击不太好操作,所以最好是确保再添加了可选择的导航选项,以便让页面控件看起来 ...

  9. 【android开发】如何在Linux平台下安装JDK环境

    原文:http://android.eoe.cn/topic/android_sdk Linux平台JDK安装 本文主要描述如何在Linux平台下安装JDK环境.进入网页:http://www.ora ...

  10. Bug:java.lang.StackOverflowError: stack size 8MB

    在开发的时候遇到了这个Bug:java.lang.StackOverflowError: stack size 8MB Log: 11-27 14:16:37.093 21892-21892/com. ...