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( ...
随机推荐
- Asp.net core 3.0
序言 我的看法:如果你未来五到十年还打算靠 ASP.NET 吃饭,ASP.NET MVC 一定要学,写 WebForm 工作机会将变得很少,具备 MVC 技能才有本钱跟年轻小伙子们抢饭碗,很高比例的 ...
- [Machine Learning] 浅谈LR算法的Cost Function
了解LR的同学们都知道,LR采用了最小化交叉熵或者最大化似然估计函数来作为Cost Function,那有个很有意思的问题来了,为什么我们不用更加简单熟悉的最小化平方误差函数(MSE)呢? 我个人理解 ...
- 20155324《网络对抗》Exp1 PC平台逆向破解（5）M
20155324<网络对抗>Exp1 PC平台逆向破解(5)M 实验目标 本次实践的对象是一个名为~pwn1~的~linux~可执行文件. 该程序正常执行流程是:~main~调用~foo~ ...
- SQL Server TVPs 批量插入数据
在SQL Server 中插入一条数据使用Insert语句,但是如果想要批量插入一堆数据的话,循环使用Insert不仅效率低,而且会导致SQL一系统性能问题.下面介绍SQL Server支持的两种批量 ...
- QButtonGroup按钮组
继承 QObject 提供 一个抽象的按钮容器, 可以将多个按钮划分为一组,不具备可视化的效果,一般放的都是可以被检查的按钮 import sys from PyQt5.QtWidgets impo ...
- luogu P5302 [GXOI/GZOI2019]特技飞行
传送门 强行二合一可还行 首先\(c\)的贡献是不会变的,先考虑求出多少交点被矩形覆盖,交点的话可以按左端点纵坐标从下到上顺序枚举一条线段,然后维护右端点纵坐标的set,把之前处理过线段的右端点放进s ...
- Codeforces Round #542 (Div. 1) 题解
开学了住校了打不了深夜场 好难受啊QwQ A 显然对于每个起点,我们只需要贪心记录这个起点出发出去的糖果数量以及离自己最近的糖果 因为这个起点最后一次装载糖果一定是装载终点离自己最近的那个糖果 $ O ...
- 15行python代码，帮你理解令牌桶算法
本文转载自: http://www.tuicool.com/articles/aEBNRnU 在网络中传输数据时,为了防止网络拥塞,需限制流出网络的流量,使流量以比较均匀的速度向外发送,令牌桶算法 ...
- 微信商户/H5支付申请 被拒原因：网站存在不实内容或不安全信息
看到这张图片,申请H5支付的朋友估计是崩溃的,被拒的原因是网站存在不实内容或不安全信息. 解决方法有两种: 针对不安全内容,则是微信支付审核团队认为你的网站存在安全漏洞的,需要修复. 针对不实内容,则 ...
- spring mybatis mysql 事务不起作用
之前框架事务应该是好的,不过这次做了些修改,不知如何竟然不好用了,整理了好半天,java框架配置就是吓人,有一点不熟悉的就可能暴露问题,好处是又深入的了解了配置原理. 开始以为是mysql不支持事务的 ...