购物车飞入效果

核心：

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. curl命令常用参数

    -a/--append 上传文件时,附加到目标文件 -A/--user-agent <string> 设置用户代理发送给服务器 -anyauth 可以使用“任何”身份验证方法 -b/--c ...

  2. CShopDialog类

    #ifndef SHOP_H #define SHOP_H #include "XWidget.h" #include "GameConfig.h" class ...

  3. ENGINE_API CXSroll

    #ifndef __XSROLL_H__ #define __XSROLL_H__ #include "CocoHead.h" #include "XWindow.h&q ...

  4. Python 实现抽象类的两种方式+邮件提醒+动态导入模块+反射（参考Django中间件源码）

    实现抽象类的两种方式 方式一 from abc import ABCMeta from abc import abstractmethod class BaseMessage(metaclass=AB ...

  5. 记一次处理IE引起的上网异常处理

    win7 64bit系统,IE(11)出问题.在更新记录里找不到IE11的更新项,也就无法通过正常卸载了.而网上的各种折腾卸载方式均宣告无效.后来无意间找到了一款国外大神开发的软件:RemoveIE, ...

  6. 绕过IE10直接安装VS2013

    参考资料:http://blog.163.com/qimo601%40126/blog/static/1582209320143354446462/ 这SB设定我就懒得说了,安个IE10要安装N多WI ...

  7. chrome 插件地址 知乎

    chrome运行内存过大:https://www.zhihu.com/question/20061319 chrome扩展程序:https://www.zhihu.com/question/19594 ...

  8. VBA学习笔记（1）----VBA对象属性方法

    'VBA对象 'VBA中的对象其实就是我们操作的具有方法.属性的excel中支持的对象 'Excel中的几个常用对象表示方法 '1.工作簿 ' Workbooks 代表工作簿集合,所有的工作簿,Wor ...

  9. SQLite的连接字符串

    SQLite的连接字符串 Basic(基本的)     Data Source=filename;Version=3;Using UTF16(使用UTF16编码)    Data Source=fil ...

  10. 学习PHP垃圾回收机制了解引用计数器的概念

    php变量存在一个叫"zval"的变量容器中,"zval"变量容器包括含变量的类型和值,还包括额外的两个字节信息,分别是“is_ref”表示变量是否属于引用,“ ...