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( ...
随机推荐
- 在线批量修改mysql中表结构
在线批量修改mysql中表结构 1.获取要修改的表的表名称登录mysql库,查询出所有表 show tables; 将需要修改表结构的表名称存放到b.txt文件中2.执行修改修改表引擎为InnoDB ...
- DirectX11--深入理解与使用缓冲区资源
前言 在Direct3D 11中,缓冲区属于其中一种资源类型,它在内存上的布局是一维线性的.根据HLSL支持的类型以及C++的使用情况,缓冲区可以分为下面这些类型: 顶点缓冲区(Vertex Buff ...
- 谈谈JAVA中的安全发布
谈谈JAVA中的安全发布 昨天看到一篇文章阐述技术类资料的"等级",看完之后很有共鸣.再加上最近在工作中越发觉得线程安全性的重要性和难以捉摸,又掏出了<Java并发编程实战& ...
- Modbus通讯两种传输方式
控制器能设置为两种传输模式(ASCII或RTU)中的任何一种在标准的Modbus网络通信.用户选择想要的模式,包括串口通信参数(波特率.校验方式等),在配置每个控制器的时候,在一个Modbus网络上的 ...
- VMware 虚拟机 linux执行 ifconfig 命令 eth0没有IP地址(intet addr、Bcast、Mask) UP BROADCAST MULTICAST 问题
VMware 虚拟机 linux执行 ifconfig 命令 eth0没有IP地址(intet addr.Bcast.Mask) UP BROADCAST MULTICAST 问题 eth0:网络接口 ...
- 浏览器将URL变成一个屏幕上显示的网页的过程?
前言 一个浏览器是怎么工作的? 正文 URL变网页过程: 1.浏览器通过http或https协议,向服务端请求页面 2.将请求过来的HEML代码通过解析,构建DOM树 3.计算DOM树上的CSS属性 ...
- $HOME
Ubuntu中 命令行输入$HOME bash: /home/XXX: Is a directory $HOME 是用户主目录
- 2018-2019-2 网络对抗技术 20165325 Exp1 PC平台逆向破解
2018-2019-2 网络对抗技术 20165325 Exp1 PC平台逆向破解(BOF实验) 实验有三个模块: (一)直接修改程序机器指令,改变程序执行流程: (二)通过构造输入参数,造成BOF攻 ...
- 拷贝本地文件到docker容器
查找所有容器 docker ps -a 查找容器长ID docker inspect -f '{{.ID}}' python 拷贝本地文件到容器 docker cp 本地路径 容器长ID:容器路径
- Mock.js简易教程，脱离后端独立开发，实现增删改查功能（转）
在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢, ...