购物车飞入效果

核心：

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 --批量重命名文件名

    # -*- coding: utf-8 -*- import os path = "d:\\curl\data\\" for file in os.listdir(path): p ...

  2. 网站收到的url请求链接，字母全部变为小写

    http://www.ithao123.cn/content-5360465.html

  3. ui-router(三)controller与template

    这篇就是在以前的基础上,把客户端angular.js 负责的部分整体串起来演示一下. 我们按照angular执行顺序来做前提准备: (1)Client 根目录下 index.html 首先加载angu ...

  4. linux下C++的man文件安装

    GCC提供了一份c++的man文档,地址:ftp://gcc.gnu.org/pub/gcc/libstdc++/doxygen/ 下载最新版的文档,比如:libstdc++-api.20140403 ...

  5. CSplashScene类

    #ifndef __TRANSITIONSCENE_H__ #define __TRANSITIONSCENE_H__ #include "GameFrameHead.h" cla ...

  6. struts2防止表单重复提交的解决方案

    一.造成重复提交主要的两个原因:    在平时的开发过程中,经常可以遇到表单重复提交的问题,如做一个注册页面,如果表单重复提交,那么一个用户就会注册多次,重复提交主要由于两种原因. 1. 一是,服务器 ...

  7. 每日英语：Air Pollution From Coal Use Cuts Lifespans in China, Study Shows

    Air pollution from coal combustion likely cut life expectancy in parts of China by more than five ye ...

  8. onResume

    比如做一个音乐播放程序,在播放过程中,突然有电话打进来了,这时系统自动调出电话,而你的音乐播放程序置于后台,触发了onPause方法.当你电话结束后,关闭电话,又自动回到音乐播放程序,此时,触发onR ...

  9. Excel　TargetRange.Validation为空的

    做Excel的时候遇到过TargetRange.Validation为空,赋值类似空指针一样的情况. 这样的情况,不懂Excel调试了好久,最后还知道,这个对象需要自己去定义才能够进行赋值, 这样定义 ...

  10. Codeforces 482C Game with Strings(dp+概率)

    题目链接:Codeforces 482C Game with Strings 题目大意:给定N个字符串,如今从中选定一个字符串为答案串,你不知道答案串是哪个.可是能够通过询问来确定, 每次询问一个位置 ...