先总结下区别：

  1. #鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。
  2.   event.clientX、event.clientY      
  3.  
  4.   #鼠标相对于document文档区域的x、y坐标。这2个属性不是标准属性，但得到了广泛支持。IE8-的事件中没有这2个属性。
  5.   event.pageX、event.pageY    #相当于jquery的 $("xx").offset() 区别的是.offset()是以元素对象的左上角为原点 而envet是以触发点击事件的鼠标点为原点
  1.   #鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。
  2.   event.offsetX、event.offsetY
  3.  
  4.   #鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
  5.   event.screenX、event.screenY

示意图：参考连接

注意：this.destory is not a function   是单词拼写错误 因该是:this.destroy()

fly插件地址：https://github.com/amibug/fly

兼容ie9-

fly.js里添加红框所示代码

window.requestAnimationFrame = window.requestAnimationFrame||function (fn) {return setTimeout(fn,1000/60)};

window.cancelAnimationFrame = window.cancelAnimationFrame ||clearTimeout;

完整例子：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <title>site title</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  7. <link href="" rel="stylesheet">
  8. <!-- <script
  9.   src="https://code.jquery.com/jquery-3.4.0.js"
  10.   integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo="
  11.   crossorigin="anonymous"></script> -->
  12. <script src="./js/jquery-3.4.0.js" type="text/javascript"></script>
  13. <script src="./js/fly.js" type="text/javascript"></script>    
  14.  
  15. <style>
  16.     .demo
  17.     {
  18.         width: 820px;
  19.         margin: 60px auto 10px auto;
  20.     }
  21.  
  22.     .m-sidebar
  23.     {
  24.         position: fixed;
  25.         top: 0;
  26.         right: 0;
  27.         background: #000;
  28.         z-index: 2000;
  29.         width: 35px;
  30.         height: 100%;
  31.         font-size: 12px;
  32.         color: #fff;
  33.     }
  34.     .cart
  35.     {
  36.         color: #fff;
  37.         text-align: center;
  38.         line-height: 20px;
  39.         padding: 200px 0 0 0px;
  40.     }
  41.     .cart span
  42.     {
  43.         display: block;
  44.         width: 20px;
  45.         margin: 0 auto;
  46.     }
  47.     .cart i
  48.     {
  49.         width: 35px;
  50.         height: 35px;
  51.         display: block;
  52.         background: url(images/cart.png) no-repeat;
  53.     }
  54.     #msg
  55.     {
  56.         position: fixed;
  57.         top: 300px;
  58.         right: 35px;
  59.         z-index: 10000;
  60.         width: 1px;
  61.         height: 52px;
  62.         line-height: 52px;
  63.         font-size: 20px;
  64.         text-align: center;
  65.         color: #fff;
  66.         background: #360;
  67.         display: none;
  68.     }
  69.  
  70.     .box
  71.     {
  72.         float: left;
  73.         width: 198px;
  74.         height: 320px;
  75.         margin-left: 5px;
  76.         border: 1px solid #e0e0e0;
  77.         text-align: center;
  78.     }
  79.     .box p
  80.     {
  81.         line-height: 20px;
  82.         padding: 4px 4px 10px 4px;
  83.         text-align: left;
  84.     }
  85.     .box:hover
  86.     {
  87.         border: 1px solid #f90;
  88.     }
  89.     .box h4
  90.     {
  91.         line-height: 32px;
  92.         font-size: 14px;
  93.         color: #f30;
  94.         font-weight: 500;
  95.     }
  96.     .box h4 span
  97.     {
  98.         font-size: 20px;
  99.     }
  100.     .u-flyer
  101.     {
  102.         display: block;
  103.         width: 30px;
  104.         height: 30px;
  105.         border-radius: 50px;
  106.         position: fixed;
  107.         z-index: 9999;
  108.     }
  109.  
  110.     .button
  111.     {
  112.         display: inline-block;
  113.         outline: none;
  114.         cursor: pointer;
  115.         text-align: center;
  116.         text-decoration: none;
  117.         font: 16px/100% 'Microsoft yahei' ,Arial, Helvetica, sans-serif;
  118.         padding: .5em 2em .55em;
  119.         text-shadow: 0 1px 1px rgba(0,0,0,.3);
  120.         -webkit-border-radius: .5em;
  121.         -moz-border-radius: .5em;
  122.         border-radius: .5em;
  123.         -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  124.         -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  125.         box-shadow: 0 1px 2px rgba(0,0,0,.2);
  126.     }
  127.     .button:hover
  128.     {
  129.         text-decoration: none;
  130.     }
  131.     .button:active
  132.     {
  133.         position: relative;
  134.         top: 1px;
  135.     }
  136.  
  137.     .orange
  138.     {
  139.         color: #fef4e9;
  140.         border: solid 1px #da7c0c;
  141.         background: #f78d1d;
  142.         background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
  143.         background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
  144.         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
  145.     }
  146.     .orange:hover
  147.     {
  148.         background: #f47c20;
  149.         background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
  150.         background: -moz-linear-gradient(top,  #f88e11,  #f06015);
  151.         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
  152.     }
  153.     .orange:active
  154.     {
  155.         color: #fcd3a5;
  156.         background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
  157.         background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
  158.         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
  159.     }
  160. </style>
  161. </head>
  162.  
  163. <body>
  164. <div>
  165.     <div id="main">
  166.         <div class="demo">
  167.             <div class="box">
  168.                 <img src="data:images/1.jpg" width="180" height="180">
  169.                 <h4>¥<span>3499.00</span></h4>
  170.                 <p>LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</p>
  171.                 <a href="#" class="button orange addcar" id="icon-cart">加入购物车</a>
  172.             </div>
  173.             <div class="box">
  174.                 <img src="data:images/2.jpg" width="180" height="180">
  175.                 <h4>¥<span>3799.00</span></h4>
  176.                 <p>Hisense/海信 LED50T1A 海信电视官方旗舰店</p>
  177.                 <a href="#" class="button orange addcar">加入购物车</a>
  178.             </div>
  179.  
  180.             <div class="box">
  181.                 <img src="data:images/3.jpg" width="180" height="180">
  182.                 <h4> ¥<span>¥3999.00</span></h4>
  183.                 <p>Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视</p>
  184.                 <a href="#" class="button orange addcar">加入购物车</a>
  185.             </div>
  186.             <div class="box">
  187.                 <img src="data:images/4.jpg" width="180" height="180">
  188.                 <h4>¥<span>6969.00</span></h4>
  189.                 <p>乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视</p>
  190.                 <a href="#" class="button orange addcar " >加入购物车</a>
  191.             </div>
  192.         </div>
  193.     </div>
  194.     <div class="m-sidebar">
  195.         <div class="cart">
  196.             <i id="end"></i><span>购物车</span>
  197.         </div>
  198.     </div>
  199.  
  200.     <div id="msg">
  201.         已成功加入购物车！
  202.     </div>
  203.  
  204. </div>
  205. <script type="text/javascript">
  206.         $(function() {
  207.             var endoffset = $("#end").offset();
  208.  
  209.             $(".addcar").click(function(event) {
  210.                 var tar=$(this);
  211.                 var img = $(this).siblings('img').attr('src'); //获取当前点击图片链接
  212.  
  213.                 var flyer = $('<img class="u-flyer" src="' + img + '">'); //抛物体对象
  214.  
  215.                 flyer.fly({
  216.                     start: {
  217.                         left: event.pageX,//抛物体起点横坐标 229  #fly元素会被设置成position: fixed    相对于浏览器窗口进行定位
  218.                         top: event.pageY //抛物体起点纵坐标  400
  219.                     },
  220.                     end: {
  221.                         left: endoffset.left,//抛物体终点横坐标
  222.                         top:  endoffset.top, //抛物体终点纵坐标
  223.                         width: 0,  //可选  动画结束时flay对象的宽度
  224.                         height: 0  //可选  动画结束时flay对象的高度
  225.                     },
  226.                     autoPlay: true, //是否直接运动,默认true
  227.                     speed: 2, //越大越快，默认1.2
  228.                     vertex_Rtop:100, //运动轨迹最高点top值，默认20
  229.  
  230.                     onEnd: function() {
  231.                         $("#msg").show().animate({width: '200px'},300).fadeOut(500);////成功加入购物车动画效果.
  232.                         tar.css("cursor", "default").removeClass('orange').unbind('click');//unbind 删除绑定事件，3.0移除用off代替
  233.                         this.destroy(); //销毁抛物体
  234.                     }
  235.                 });
  236.             });
  237.         });
  238.  
  239. </script>
  240. </body>
  241. </html>

event、fly.js、购物车特效的更多相关文章

  1. 购物车增加、减少商品时动画效果：jQuery.Fly.js插件使用方法

    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...

  2. 未封装的js放大镜特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  3. Three.js粒子特效，shader渲染初探（一篇非常详细的介绍）

    Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...

  4. 第五章 JS典型特效

    注意: 1.JS在HTML中从上到下依次执行,所以获取元素的结果与JS的位置有关 <!DOCTYPE html> <html> <head> <title&g ...

  5. js 时钟特效

      时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的canvas标签实现的 款式一 借助jQuery插件实现 < ...

  6. 每日技术总结：fly.js，个位数前补零等

    01.FLY.JS 文档:https://wendux.github.io/dist/#/doc/flyio/readme 02.微信小程序组件——input属性之cursor-spacing 属性 ...

  7. mpvue微信小程序http请求终极解决方案-fly.js

    fly.js是什么? 一个支持所有JavaScript运行环境的基于Promise的.支持请求转发.强大的http请求库.可以让您在多个端上尽可能大限度的实现代码复用(官网解释) fly.js有什么特 ...

  8. 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js

    在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...

  9. JS实现购物车特效

    学习通过JavaScript实现类似于淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能. 1. 实现兼容低版本IE的getElementsByClassName( ...

随机推荐

  1. java.lang.IllegalArgumentException: There is no PasswordEncoder mapped for the id "null"报错

    出现问题的原因: 内存用户验证时,Spring boot 2.0.1引用的security 依赖是 spring security 5.X版本,此版本需要提供一个PasswordEncorder的实例 ...

  2. Money King【题解】

    我又傻了……竟然忘了区别大根堆和小根堆的性质,以至于一个符号打错,debug了半天……(我真是太菜了……) 题目描述 Once in a forest, there lived N aggressiv ...

  3. vue 中监测滚动条加载数据（懒加载数据）

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  4. iview-admin安装

    桌面创建project文件夹. 文件夹内右键选择gitbash here,输入git init.文件夹内会生成.git文件夹. 再输入git config --global user.name &qu ...

  5. <发条游戏设计>粗翻——序言、

    序言——————————————————————— 优雅 就像在英语里的很多单词一样,“优雅”有着一些不同意义的解释.一些习惯性的用法常常带有“美”的意思:例如“她穿着一条优雅的裙子”,代表着一种完全 ...

  6. Windows Hook技术

    0x01 简介 有人称它为“钩子”,有人称它为“挂钩”技术.谈到钩子,很容易让人联想到在钓东西,比如鱼钩就用于钓鱼.编程技术的钩子也是在等待捕获系统中的某个消息或者动作.钩子的应用范围非常广泛,比如输 ...

  7. Coursera, Big Data 4, Machine Learning With Big Data (week 1/2)

    Week 1 Machine Learning with Big Data KNime - GUI based Spark MLlib - inside Spark CRISP-DM Week 2, ...

  8. day 21 - 1 包，异常处理

    创建目录代码 1. 无论是 import 形式还是 from...import 形式,凡是在导入语句中(而不是在使用时)遇到带点的,都要第一时间提高警觉:这是关于包才有的导入语法2. 包是目录级的(文 ...

  9. TensorFlow GPU版本号与CUDA的对应产生的错误

    前言 感悟:cuda 8.0+cudnn 6.0+TensorFlow 1.3  cuda 9.0+cudnn 7.0+TensorFlow 1.7 python3.6.2+cuda 9.0+cudn ...

  10. java 日常学习记录

    前言:记录自己初学java 遇到的问题. 环境(win10  开始安装的IDEA,net 开发者  )学习网址:http://how2j.cn/stage/14.html (不是打广告) 特别是对初学 ...