event、fly.js、购物车特效

先总结下区别：

#鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。

  event.clientX、event.clientY      

  #鼠标相对于document文档区域的x、y坐标。这2个属性不是标准属性，但得到了广泛支持。IE8-的事件中没有这2个属性。

  event.pageX、event.pageY    #相当于jquery的 $("xx").offset() 区别的是.offset()是以元素对象的左上角为原点 而envet是以触发点击事件的鼠标点为原点

  #鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

  event.offsetX、event.offsetY

  #鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

  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;

完整例子：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<title>site title</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

<link href="" rel="stylesheet">

<!-- <script

  src="https://code.jquery.com/jquery-3.4.0.js"

  integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo="

  crossorigin="anonymous"></script> -->

<script src="./js/jquery-3.4.0.js" type="text/javascript"></script>

<script src="./js/fly.js" type="text/javascript"></script>    

<style>

    .demo

    {

        width: 820px;

        margin: 60px auto 10px auto;

    }

    .m-sidebar

    {

        position: fixed;

        top: 0;

        right: 0;

        background: #000;

        z-index: 2000;

        width: 35px;

        height: 100%;

        font-size: 12px;

        color: #fff;

    }

    .cart

    {

        color: #fff;

        text-align: center;

        line-height: 20px;

        padding: 200px 0 0 0px;

    }

    .cart span

    {

        display: block;

        width: 20px;

        margin: 0 auto;

    }

    .cart i

    {

        width: 35px;

        height: 35px;

        display: block;

        background: url(images/cart.png) no-repeat;

    }

    #msg

    {

        position: fixed;

        top: 300px;

        right: 35px;

        z-index: 10000;

        width: 1px;

        height: 52px;

        line-height: 52px;

        font-size: 20px;

        text-align: center;

        color: #fff;

        background: #360;

        display: none;

    }

    .box

    {

        float: left;

        width: 198px;

        height: 320px;

        margin-left: 5px;

        border: 1px solid #e0e0e0;

        text-align: center;

    }

    .box p

    {

        line-height: 20px;

        padding: 4px 4px 10px 4px;

        text-align: left;

    }

    .box:hover

    {

        border: 1px solid #f90;

    }

    .box h4

    {

        line-height: 32px;

        font-size: 14px;

        color: #f30;

        font-weight: 500;

    }

    .box h4 span

    {

        font-size: 20px;

    }

    .u-flyer

    {

        display: block;

        width: 30px;

        height: 30px;

        border-radius: 50px;

        position: fixed;

        z-index: 9999;

    }

    .button

    {

        display: inline-block;

        outline: none;

        cursor: pointer;

        text-align: center;

        text-decoration: none;

        font: 16px/100% 'Microsoft yahei' ,Arial, Helvetica, sans-serif;

        padding: .5em 2em .55em;

        text-shadow: 0 1px 1px rgba(0,0,0,.3);

        -webkit-border-radius: .5em;

        -moz-border-radius: .5em;

        border-radius: .5em;

        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);

        box-shadow: 0 1px 2px rgba(0,0,0,.2);

    }

    .button:hover

    {

        text-decoration: none;

    }

    .button:active

    {

        position: relative;

        top: 1px;

    }

    .orange

    {

        color: #fef4e9;

        border: solid 1px #da7c0c;

        background: #f78d1d;

        background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));

        background: -moz-linear-gradient(top,  #faa51a,  #f47a20);

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');

    }

    .orange:hover

    {

        background: #f47c20;

        background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));

        background: -moz-linear-gradient(top,  #f88e11,  #f06015);

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');

    }

    .orange:active

    {

        color: #fcd3a5;

        background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));

        background: -moz-linear-gradient(top,  #f47a20,  #faa51a);

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');

    }

</style>

</head>

<body>

<div>

    <div id="main">

        <div class="demo">

            <div class="box">

                <img src="data:images/1.jpg" width="180" height="180">

                <h4>¥<span>3499.00</span></h4>

                <p>LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</p>

                <a href="#" class="button orange addcar" id="icon-cart">加入购物车</a>

            </div>

            <div class="box">

                <img src="data:images/2.jpg" width="180" height="180">

                <h4>¥<span>3799.00</span></h4>

                <p>Hisense/海信 LED50T1A 海信电视官方旗舰店</p>

                <a href="#" class="button orange addcar">加入购物车</a>

            </div>

            <div class="box">

                <img src="data:images/3.jpg" width="180" height="180">

                <h4> ¥<span>¥3999.00</span></h4>

                <p>Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视</p>

                <a href="#" class="button orange addcar">加入购物车</a>

            </div>

            <div class="box">

                <img src="data:images/4.jpg" width="180" height="180">

                <h4>¥<span>6969.00</span></h4>

                <p>乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视</p>

                <a href="#" class="button orange addcar " >加入购物车</a>

            </div>

        </div>

    </div>

    <div class="m-sidebar">

        <div class="cart">

            <i id="end"></i><span>购物车</span>

        </div>

    </div>

    <div id="msg">

        已成功加入购物车！

    </div>

</div>

<script type="text/javascript">

        $(function() {

            var endoffset = $("#end").offset();

            $(".addcar").click(function(event) {

                var tar=$(this);

                var img = $(this).siblings('img').attr('src'); //获取当前点击图片链接

                var flyer = $('<img class="u-flyer" src="' + img + '">'); //抛物体对象

                flyer.fly({

                    start: {

                        left: event.pageX,//抛物体起点横坐标 229  #fly元素会被设置成position: fixed    相对于浏览器窗口进行定位

                        top: event.pageY //抛物体起点纵坐标  400

                    },

                    end: {

                        left: endoffset.left,//抛物体终点横坐标

                        top:  endoffset.top, //抛物体终点纵坐标

                        width: 0,  //可选  动画结束时flay对象的宽度

                        height: 0  //可选  动画结束时flay对象的高度

                    },

                    autoPlay: true, //是否直接运动,默认true

                    speed: 2, //越大越快，默认1.2

                    vertex_Rtop:100, //运动轨迹最高点top值，默认20

                    onEnd: function() {

                        $("#msg").show().animate({width: '200px'},300).fadeOut(500);////成功加入购物车动画效果.

                        tar.css("cursor", "default").removeClass('orange').unbind('click');//unbind 删除绑定事件，3.0移除用off代替

                        this.destroy(); //销毁抛物体

                    }

                });

            });

        });

</script>

</body>

</html>

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

购物车增加、减少商品时动画效果：jQuery.Fly.js插件使用方法
某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图: 这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...
未封装的js放大镜特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
Three.js粒子特效，shader渲染初探（一篇非常详细的介绍）
Three.js粒子特效,shader渲染初探转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序关于Three.js,网上有不多 ...
第五章 JS典型特效
注意: 1.JS在HTML中从上到下依次执行,所以获取元素的结果与JS的位置有关 <!DOCTYPE html> <html> <head> <title&g ...
js 时钟特效
时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的canvas标签实现的款式一借助jQuery插件实现 < ...
每日技术总结：fly.js，个位数前补零等
01.FLY.JS 文档:https://wendux.github.io/dist/#/doc/flyio/readme 02.微信小程序组件——input属性之cursor-spacing 属性 ...
mpvue微信小程序http请求终极解决方案-fly.js
fly.js是什么? 一个支持所有JavaScript运行环境的基于Promise的.支持请求转发.强大的http请求库.可以让您在多个端上尽可能大限度的实现代码复用(官网解释) fly.js有什么特 ...
基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
JS实现购物车特效
学习通过JavaScript实现类似于淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能. 1. 实现兼容低版本IE的getElementsByClassName( ...

随机推荐

netcore中的缓存介绍
Cache(缓存)是优化web应用的常用方法,缓存存放在服务端的内存中,被所有用户共享.由于Cache存放在服务器的内存中,所以用户获取缓存资源的速度远比从服务器硬盘中获取快,但是从资源占有的角度考虑 ...
DirectX11 With Windows SDK--25 法线贴图
前言在很早之前的纹理映射中,纹理存放的元素是像素的颜色,通过纹理坐标映射到目标像素以获取其颜色.但是我们的法向量依然只是定义在顶点上,对于三角形面内一点的法向量,也只是通过比较简单的插值法计算出相应 ...
半导体知识讲解：IC基础知识及制造工艺流程
本文转载自微信公众号 - 中国半导体论坛 , 链接 https://mp.weixin.qq.com/s/VhCsVGyEDrgc2XJ0jxLvaA
CTypes
参考:http://docs.pythontab.com/interpy/c_extensions/ctypes/ Python中的ctypes模块可能是Python调用C方法中最简单的一种.ctyp ...
Writage让你的Word支持Markdown
Writage 简单的执行后,word就可以在保存或打开的时候支持Markdown了!
Contest2178 - 2019-4-18 高一noip基础知识点测试7 题解版
刚刚改完题,才有时间发题解传送门 T1 exgcd裸题对a,b跑exgcd,答案就是x*c/gcd(a,b),y*c/gcd(a,b) 不合法的情况:当且仅当c%gcd(a,b)!=0 代码 T2 ...
git的操作集合
一.git 操作 $ git branch -a //查看远程分支$ git branch //查看本地分支 $ git branch -d <BranchName>//删除本地分支$ g ...
springboot2.1.3集成单节点elasticsearch6.4.0
本案例写了一个关于医生医院搜索的例子,包括求和模式下的打分(分值与相关性有关)搜索,单节点时切勿配置节点名称和节点ip.github地址:https://github.com/zhzhair/spri ...
论文笔记：Image Smoothing via L0 Gradient Minimization
今天要分享的这篇论文是我个人最喜欢的论文之一,它的思想简单.巧妙,而且效果还相当不错.这篇论文借助数学上的 $L_0$ 范数工具对图像进行平滑,同时保留重要的边缘特征,可以实现类似水彩画的效果(见 ...
SqlServer存储过程及函数
存储过程和函数类似于Java中的方法. ⒈存储过程一组预先编译好的sql语句的集合,理解成批处理语句. 好处: ①提高代码的重用性 ②简化操作 ③减少了编译次数并且减少了和数据库服务器的连接次数,提 ...

event、fly.js、购物车特效

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

随机推荐

热门专题