购物车飞入效果

核心：

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. Python Unicode 转换 字符串

    estimate_price = "\u00a340\u00a0\u00a0-\u00a060" sold_price = "Sold for \u00a345" ...

  2. 细说websocket - php篇(未完)

    下面我画了一个图演示 client 和 server 之间建立 websocket 连接时握手部分,这个部分在 node 中可以十分轻松的完成,因为 node 提供的 net 模块已经对 socket ...

  3. eclipse中maven插件，改变默认仓库位置

    一.eclipse中maven默认仓库是当前用户下.m2/repository,需改变默认路径按照下面步骤. 步骤一:安装maven 下载:http://maven.apache.org/ 配置mav ...

  4. Decoration3：增删改的实现

    下面我们完成数据的增加.删除.修改,这里的主要知识就是前端Angularjs,遇到的问题 1.路由组件采用ui.router,链接的写法有两种: <a href="#/coach/cr ...

  5. MySQL是如何做到安全登陆

    首先Mysql的密码权限存储在mysql.user表中.我们不关注鉴权的部分,我们只关心身份认证,识别身份,后面的权限控制是很简单的事情.在mysql.user表中有个authentication_s ...

  6. 【计算机网络】IP分类

    A类IP地址 A类IP地址:用可变的7位(bit)来标识网络号,可变的24位标识主机号,最前面一位为"0",即A类地址的第一段取值介于1-126之间.A类地址通常为大型网络而提供, ...

  7. Spring Boot与Spring Security整合后post数据不了，403拒绝访问

    http://blog.csdn.net/sinat_28454173/article/details/52251004 *************************************** ...

  8. [每天一个Linux小技巧]　查看时钟源精度

    $ dmesg | grep clock [0.000000] OMAP clocksource: GPTIMER1 at 24000000 Hz  [0.000000] sched_clock: 3 ...

  9. am335x 一个按键实现重置 ip 和 root passwd

    * 其实做法很简单,我连按键驱动都没有去写,读取 gpio 的值然后 拷贝了一份 /etc/network/interfaces_bak 为 interfaces ,用脚本重新设置了一次root 密码 ...

  10. seajs中引用jquery插件

    步骤一:使用define封装成seajs模块,返回匿名函数,包含插件的源码 define(function(require,exports,moudles){ return function(jque ...