样例

使用电商 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. c#之hello world

    前言:公司开始转型java,作为javaer,负责其他同事转型,期间以为工作需要,需要简单学习c#语法,顾有此文,及其后续的一系列文章(c#里头的一些优点,可以为提升java的思想带来帮助) 1. 安 ...

  2. libevent的问题

    问题: nginx error while loading shared libraries: libevent-2.0.so.5: cannot open shared object file: N ...

  3. xtrabackup 源码安装

    安装依赖包:这些依赖包必须要先安装好 # yum install cmake libaio-devel ncurses-devel bzip2-devel libxml2-devel libgcryp ...

  4. java基础知识总结(二)

    +=隐含了强制类型转换. x+=y;等价与:x = (x的数据类型)(x + y); 函数重载? 函数名同样.參数列表不同.跟返回值不关,就是函数重载 封装是什么? 隐藏对象的属性和详细的实现细节,仅 ...

  5. java udp 广播

    原文链接: http://blog.csdn.net/yudajun/article/details/8477149 udp 是一种网络通信协议,不需要客户端和服务器端建立连接即可进行通讯功能.相对于 ...

  6. Java – Stream has already been operated upon or closed

    Java – Stream has already been operated upon or closed package com.mkyong.java8; import java.util.Ar ...

  7. Java 利用 poi 生成 Excel文件的通用例子

    在用java 写数据库应用的时候, 通常会生成各种报表,而这些报表可能会被导出为各种格式的文件,比如Excel文档,pdf 文档等等. 今天先做了一个生成Excel 文档的例子,主要解决以下问题: 生 ...

  8. 启动和停止kafka 及kafka manager

    启动kafka: sh /app/pet_kafka_xxxx_cluster/bin/kafka-server-start.sh -daemon /app/pet_kafka_xxxx_cluste ...

  9. CentOS 安装Mosquitto及测试

    系统信息,阿里云服务器 安装工具 yum install gcc gcc-c++ yum install openssl-devel yum install c-ares-devel yum inst ...

  10. Kubernetes的系统架构与设计理念

    Kubernetes与云原生应用简介 随着Docker技术的发展和广泛流行,云原生应用和容器调度管理系统也成为IT领域大热的词汇.事实上,云原生应用的思想,在Docker技术火爆之前,已经由云计算技术 ...