购物车飞入效果

核心：

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. android 实现代码混淆

    对于使用签名的apk,经常使用的反编译之后还是能查看class文件的代码实现.对于反编译可查看个人的博客点击打开链接 使用代码混淆就能是这样的常规反编译失效.很多其它混淆机制见官网http://dev ...

  2. Genymotion INSTALL_FAILED_CPU_ABI_INCOMPATIBLE

    出现这个错误的原因是Genymotion默认的处理器是x86的,不是arm的.所以安装的时候会出错,仅仅要把x86转换成arm就能够了. 转换方法: 1.下载转换的zip文件:X86 to ARM 2 ...

  3. (Xilinx)FPGA中LVDS差分高速传输的实现

    https://wenku.baidu.com/view/24e8bad86f1aff00bed51ef8.html

  4. 基于HTML5堆木头游戏

    今天要来分享一款很经典的HTML5游戏——堆木头游戏,这款游戏的玩法是将木头堆积起来,多出的部分将被切除,直到下一根木头无法堆放为止.这款HTML5游戏的难点在于待堆放的木头是移动的,因此需要你很好的 ...

  5. beaglebone black ubuntu display x11 server的配置

     Change default resolution on BeagleBone modesetting vs fbdev digiteltlc May 7th, 2014, 03:28 PM Hi ...

  6. 框架Iframe的退出，IE 火狐都没问题 到360就不跳转页面 刷新一遍才跳转到登录页

    遇到这种情况 ,郁闷死了,来回折腾好几种跳转方法,最后有一个灵感,当我点击退出按钮的时候,我是用jquery $("#ID").click(function(){}) 这种方法异步 ...

  7. 三分 - HNU 13409 Flowers

    Flowers Problem's Link: http://acm.hnu.cn/online/?action=problem&type=show&id=13409&cour ...

  8. 向服务器发送josn字符串，服务器端解析

    <script type="text/javascript"> $(function () { $("#btnsave").click(functi ...

  9. JQuery操作表单相关使用总结

    select下拉列表onChange事件之JQuery实现: JQuery: $(document).ready(function () { $("#selectMenu").bi ...

  10. git 删除分之以及删除文件夹

    1.删除分支 1.1查看所有分支: git branch -a 得到结果: 1.2删除HEAD分支 git push origin --delete HEAD 2.删除文件夹 2.1 查看本地分支下的 ...