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( ...
随机推荐
- [JDK8] Stream
1 collect(toList()) collect(toList()) 方法由Stream 里的值生成一个列表,是一个及早求值操作. 2 map 如果有一个函数可以将一种类型的值转换成另外一种类型 ...
- 生成ISO文件
cat /dev/cdrom > image.iso dd if=/dev/cdrom of=image.iso mkisofs -V "Label" -o image.is ...
- Linux samba服务器的搭建
目录 1. 安装samba 2. 配置smb.conf 3. 创建samba登陆用户 4. 创建samba共享文件夹 5. 重启samba服务 6. 访问samba共享文件夹 7. 参考资料 1. 安 ...
- 第30月第13天 supportedInterfaceOrientationsForWindow旋转
1. 对于做视频横屏播放的情况下:做旋转有3种方法. 第一种:就是网上说的用旋转矩阵方法CGAffineTransformMakeRotation来做,直接旋转某个view,之后setFrame,至于 ...
- CentOS 7下安装vertica记录
CentOS 7下安装vertica记录 1. 安装好centeros 并更新 Centeros安装就不说了,安装完之后联网环境下 yum update.更新下,使得那些包都是新的.(要想用中文 ...
- 软件测试自动化…python学习到什么程度？代码好不好学！
软件测试自动化…python学习到什么程度?代码好不好学! 如下:
- 服务发现 consul cluster 的搭建【转】
consul cluster setup 介绍和指南: consul用于服务发现.当底层服务发生变化时,能及时更新正确的mysql服务IP. 并提供给业务查询.但需要自行编写脚本,监测数据库状态和切断 ...
- codeforces 813E 主席树
题意: 一个数列多组询问,每次询问[l,r]中最多能选多少个数字,其中每个数字的出现次数不超过k次 题解: 我们保存对于每个位置上,出现超过k次的位置,那么对于每次询问,我们就变成了查询区间[l,r] ...
- Harbor修改/data目录位置
由于harbor默认数据存储位置在/data目录,且修改配置文件操作较为复杂,故这里使用软连接的方式将/data目录文件夹内容映射到/app目录下. ln -s /app/harbor/data/ d ...
- Shell学习笔记(二)
if 语句 最简单的用法就是只使用 if 语句,它的语法格式为: if condition then statement(s) fi condition是判断条件,如果 condition 成立(返回 ...