购物车飞入效果
核心：
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;26px;"> <button class="btn-hamburger" id="toggle-btn"></button> </li> <li class="flex-1 header-title"> 名称 </li> <li style="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, 24, height: 24 }, onEnd:function(){ // $("#tip").show().animate({ '200px'},300).fadeOut(500);////成功加入购物车动画效果 this.destroy(); //销毁抛物体 } }); } </script> </body> </html>
预览：
案例一：https://besswang.github.io/fly/index.html
案例二：https://besswang.github.io/slideout-test/index.html#