购物车飞入效果

核心：

1，购物车与飞入圆点（或者图标）的定位关系

完整源码：

<!doctype html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>移动手机的侧边栏滑动</title>

<link rel="stylesheet" href="slideout.css">

<link rel="stylesheet" href="common.css">

</head>

<body>

<nav id="menu" class="menu">

  <a href="#" target="_blank">

    <header class="menu-header">

      <span class="menu-header-title">个人中心</span>

    </header>

  </a>

  <section class="menu-section">

    <h3 class="menu-section-title">姓名</h3>

    <ul class="menu-section-list">

      <li><a href="#" target="_blank">我的订单</a></li>

      <li><a href="#" target="_blank">我的地址</a></li>

      <li><a href="#" target="_blank">设置</a></li>

      <li><a href="#" target="_blank">退出</a></li>

    </ul>

  </section>

</nav>

<main id="main" class="panel">

    <!-- 遮罩 -->

    <div class="shade" id="shade"></div>

    <article>

        <ul class="header flex flex-row flex-align-center">

            <li style="margin-right:20px;width:26px;">

                <button class="btn-hamburger" id="toggle-btn"></button>

            </li>

            <li class="flex-1 header-title">

                名称

            </li>

            <li style="width:22px;padding:5px 15px;">

                <img class="listtype" src="https://s1.ax1x.com/2017/12/13/bjnyj.png" alt="">

            </li>

        </ul>

    </article>

    <div style="padding-top:46px;">

        <ul>

            <li class="flex flex-row flex-align-center box_appmsg">

                <div class="box_hd">

                    <img class="box_thumb" src="https://s1.ax1x.com/2017/12/13/qBTmt.jpg" alt="">

                </div>

                <div class="flex-1 list-info">

                    <p id="gname">商品一</p>

                    <span id="price">50.00</span>/<span id="unit">个</span>

                </div>

                <a href="#" class="number_select plus" id="plus" onclick="plus(this)">+</a>

            </li>

        </ul>

    </div>

    <!--footer-->

    <ul class="flex flex-row flex-align-center footer">

        <li class="car-box">

            <img id="cart" class="cart" src="https://s1.ax1x.com/2017/12/13/qBAsI.png" alt="">

            <span class="weui-badge" id="badge" style="position: absolute; top:0; right: -0.4em;">0</span>

        </li>

        <li class="flex-1" style="color:#fff;">￥110.00</li>

        <li class="order-btn"><a href="#">下单</a></li>

    </ul>

</main>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

<!--添加商品飞入效果-->

<script src="jquery.fly.js"></script>

<!--点击个人中心左滑效果-->

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

<script type="text/javascript">

    $(function () {

        var flag = 1 //;是否登录；1：登录，0:未登录

        if(flag == 1){

            $("#toggle-btn").addClass("js-slideout-toggle")

            if($("#toggle-btn").hasClass("js-slideout-toggle")){

                // 左边菜单滑动-start

                var slideout = new Slideout({

                    'panel': document.getElementById('main'),

                    'menu': document.getElementById('menu'),

                    'padding': 256,

                    'tolerance': 70

                });

                document.querySelector('.js-slideout-toggle').addEventListener('click', function() {

                    slideout.toggle();

                });

                // 点击遮罩，收回侧边栏

                document.querySelector('.shade').addEventListener('click', function() {

                    slideout.toggle();

                });

                document.querySelector('.menu').addEventListener('click', function(eve) {

                    if (eve.target.nodeName === 'A') { slideout.close(); }

                });

                // 左边菜单滑动-end

            }

        }else{

            $("#toggle-btn").removeClass("js-slideout-toggle");

            $("#toggle-btn").click(function () {

                alert("请登录");

            })

        }

    })

    function plus(obj,e) {

        var ev = window.event || e;

        addFly(ev);

        var num = Number($("#badge").text());

        num += 1;

        $("#badge").text(num);

    }

    // 添加购物车飞入效果

    function addFly(e) {

        var ev =  window.event || e;

        // var offset = $('#amount').offset(), flyer = $('<img class="u-flyer" src="logo.png"/>');

        var offset = $('#cart').offset(), flyer = $('<div class="u-flyer"></div>');

        flyer.fly({

            start: {

                left: ev.pageX-40,

                top: ev.pageY-20

            },

            end: {

                left: offset.left,

                top: offset.top,

                width: 24,

                height: 24

            },

            onEnd:function(){

                // $("#tip").show().animate({width: '200px'},300).fadeOut(500);////成功加入购物车动画效果

                this.destroy(); //销毁抛物体

            }

        });

    }

</script>

</body>

</html>

预览：

案例一：https://besswang.github.io/fly/index.html

案例二：https://besswang.github.io/slideout-test/index.html#

fly的更多相关文章

  1. 图论 - 寻找fly真迹

    一天fly正坐在课堂上发呆,突然,他注意到了桌面上的一个字符串S1S2S3S4...Sn,这个字符串只由字符"a","b"和"c"构成.刚好 ...

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

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

  3. 购物车增加、减少商品时动画效果：jQuery.Fly.js插件使用方法

    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...

  4. （1）定义一个接口CanFly，描述会飞的方法public void fly(); （2）分别定义类飞机和鸟，实现CanFly接口。 （3）定义一个测试类，测试飞机和鸟，在main方法中创建飞机对象和鸟对象， 再定义一个makeFly()方法，其中让会飞的事物飞。并在main方法中调用该方法， 让飞机和鸟起飞。

    package b; public interface CanFly { public void fly(); } package b; public class FeiJi implements C ...

  5. skyline TerraExplorer fly设置相对路径的方法

    软件环境:TerraExplorer Pro(以下简称TEP)6.5 在TEP中,对于本地(非网络)文件路径,默认都是绝对路径,在移动数据时非常麻烦,以下是本人总结出一些设置相对路径的规则 假设fly ...

  6. bzoj 1800: [Ahoi2009]fly 飞行棋 暴力

    1800: [Ahoi2009]fly 飞行棋 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline ...

  7. Sencha Touch 之 Ext.fly方法的使用

    Ext.fly方法是Ext.js 4中的flyweight技术,该技术在浏览器中为使用Ext.fly方法的元素节点开辟一块内存,下一次使用Ext.fly方法的元素节点将占据同一块内存,即覆盖前一次的元 ...

  8. Ext JS学习第十二天 Ext基础之操作dom ； get与fly 方法

    此文用来记录学习笔记 •嗯!首先,什么是DOM(Document Object Model) –W3C对DOM的定义:文档对象模型是一个平台,一个中立于语言的应用程序编程接口(API),允许程序访问并 ...

  9. BZOJ 1800: [Ahoi2009]fly 飞行棋( 枚举 )

    O(N2)算出有x条直径然后答案就是x(x-1)/2...这个数据范围是闹哪样! ----------------------------------------------------------- ...

  10. ExtJS学习-------Ext正确Dom操作：Ext.get Ext.fly Ext.getDom

    详细实例: (1)创建JSP文件.引入CSS和js文件,加入三个Div <%@ page language="java" import="java.util.*&q ...

随机推荐

  1. C#:XML操作（简单）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.X ...

  2. 四种对象生存期和作用域、static 用法总结

    一.四种对象生存期和作用域 栈对象 隐含调用构造函数(程序中没有显式调用) 堆对象 隐含调用构造函数(程序中没有显式调用),要显式释放 全局对象.静态全局对象 全局对象的构造先于main函数 已初始化 ...

  3. C# Directory类的操作

    Directory类位于System.IO 命名空间.Directory类提供了在目录和子目录中进行创建移动和列举操作的静态方法.此外,你还可以访问和操作各种各样的目录属性,例如创建或最后一次修改时间 ...

  4. python 中 numpy array 中的维度

    简介 numpy 创建的数组都有一个shape属性,它是一个元组,返回各个维度的维数.有时候我们可能需要知道某一维的特定维数. 二维情况 >>> import numpy as np ...

  5. Spring Cloud 模块简介2

    前面一篇文章谈到微服务基础框架,而Netflix的多个开源组件一起正好可以提供完整的分布式微服务基础架构环境,而对于Spring Cloud正是对Netflix的多个开源组件进一步的封装而成,同时又实 ...

  6. unity, 如果碰撞使用2d物理，为防止颤动，需将更新position的代码写在FixedUpdate里

    例如我为主角添加了一个circle collider 2d,和一个rigidbody 2d,为障碍物添加了一个circle collider 2d. 然后我在主角的Update函数里更新位置让主角由A ...

  7. Jquery easyUI datagrid载入复杂JSON数据方法

    1.JSON数据为: {     "total":28, "rows": [     {       "itemNo": "1&q ...

  8. hdoj 4526 威威猫系列故事——拼车记

    威威猫系列故事——拼车记 Time Limit: 500/200 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total ...

  9. 执行git命令出现 xcrun: error:

    xcrun: error: active developer path ("/Applications/Xcode.app/Contents/Developer") does no ...

  10. SQL查询优化联合索引 与 单一列的索引

    目前WEB的普及太快,在实际的开发中,一旦遇到大数据量的时候就需要做到优化,让查询的更快,才能给客户更好的体验,也能够在程序上避免timeout. 部分转载自:https://www.cnblogs. ...