https://www.w3cmm.com/javascript/touch.html   //触摸与手势事件连接
tinyscrollbar //方法1
var _this = $('#fabu');
var scrollFunc=function(e){
e=e||window.event;
if(e.wheelDelta){//IE/Opera/Chrome
if(e.wheelDelta==-120){
_this.hide();
}else{
_this.show();
}
}else if(e.detail){
//Firefox
if(e.detail==-3){
_this.hide();
}else{
_this.show();
}
}
};
if(document.addEventListener){//注册事件
document.addEventListener("onmousewheel" ,scrollFunc, false);
}
//IE/Opera/Chrome
window.onmousewheel=document.onmousewheel=scrollFunc; //方法----------稍微有点动画
 //发布按钮上滑消失,下滑出现
var startY, endY;
document.addEventListener('touchstart', function (e) {
startY = e.touches[0].pageY;
console.log(startY)
}, false);
document.addEventListener('touchmove', function (e) {
endY = e.changedTouches[0].pageY;
moveLoad();
}, false);
function moveLoad() {
var movY = endY - startY;
var fabu = document.getElementById('fabu');
if (movY > 0) {
jQuery("#fabu").animate({bottom:"10px"},0.1).fadeIn(50); }
else {
jQuery("#fabu").animate({bottom:"-60px"},0.5).fadeOut(50);
}
}

//方法2
function getData(event) {
var e = event || window.event;
//获取滚动距离(FF每次滚动 data为3或者-3,其他为120或者-120 等于3是向上滚动,等于-3是向下滚动)
var data = e.detail || e.wheelDelta;
if(data==3){
_this.hide();
}else if(data==-3){
_this.show();
}
}
//IE之外的绑定事件方法
if (document.addEventListener && !document.attachEvent) {
document.addEventListener('mousewheel', getData);
//FF绑定滚动事件
document.addEventListener('DOMMouseScroll', getData);
}
//IE
else if (document.attachEvent && !document.addEventListener) {
document.attachEvent('onmousewheel', getData);
} else {
window.onmousewheel = getData;
}
//http://www.tuicool.com/articles/vANraay //方法3 手机端滑动监听事件
//发布按钮上滑消失,下滑出现
//var _this = $('#fabu');
var startY,endY;
document.addEventListener('touchstart',function(e){
startY= e.touches[0].pageY;
},false);
document.addEventListener('touchend',function(e){
endY= e.changedTouches[0].pageY;
moveLoad();
},false);
function moveLoad(){
var movY=endY-startY;
if(movY<-80){
//_this.hide();
alert(123)
}else{
//_this.show();
}
}

js监听事件 上滑消失下滑出现的效果 触摸与手势事件的更多相关文章

  1. js判断手指的上滑,下滑,左滑,右滑,事件监听

    原理:1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和staerY: 2:当触发touchmove事件的时候,再获取此时手指的横坐标moveEndX和纵坐标moveEn ...

  2. NestedScrollView嵌套RecycleView 滑动 实现上滑隐藏 下滑显示头部效果

    废了好大的劲才弄好的,记下来 方便以后查看 public class MainActivity extends AppCompatActivity { private RecyclerView mRe ...

  3. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  4. JS监听div的resize事件

    原文地址:http://zhangyiheng.com/blog/articles/div_resize.html 需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用c ...

  5. js监听transition过渡事件

    html <div id="mydiv"> </div> style #mydiv{ width:100px; height:100px; backgrou ...

  6. js 监听整个页面的回车事件

    JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch;      ...

  7. 原 JS监听回车事件

    原 JS监听回车事件 发表于2年前(2014-06-04 10:16)   阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦  ...

  8. js监听用户的键盘敲击事件,兼容各大主流浏览器

    js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...

  9. 原生js监听input值改变事件

    哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http:// ...

随机推荐

  1. Web开发必回知识点

    Web前端必须知道 一.常用那几种浏览器测试?有哪些内核(Layout Engine)? 1.浏览器:IE,Chrome,FireFox,Safari,Opera. 2.内核:Trident,Geck ...

  2. Js-Html 前端系列--可伸缩菜单

    一个非常经典的Demo,自行开发可以扩展. <head> <title></title> <style type="text/css"&g ...

  3. 他们最先开发微信小程序,为何现在又退出了?

    1.当前现状 这几天大家又被微信小程序刷屏了,"得到"退出了小程序,"今日头条"暂停了服务,各种股票交易类的小程序也在证监会的要求下纷纷暂停服务.如果大家还不知 ...

  4. MVC源码解析 - Http Pipeline 解析(下)

    接上一篇, 我在 HttpModule 的Init方法中, 添加了自己的事件, 在Pipeline里, 就会把握注册的事件给执行了. 那么Pipeline是如何执行并且按照什么顺序执行的呢? 现在我们 ...

  5. (转载)python日期函数

    转载于http://www.cnblogs.com/emanlee/p/4399147.html 所有日期.时间的api都在datetime模块内. 1. 日期输出格式化 datetime => ...

  6. SAP CRM 为用户创建业务合作伙伴并分配到组织单位

    想要在SAP CRM的前台完成一些操作,需要登录的用户在系统中存在对应的业务合作伙伴才可以,某些情况下,还需要被分配到正确的公司.部门.职位.下面是相关的操作步骤. 本文假定读者已经拥有一个开发帐号. ...

  7. 用备份控制文件做不完全恢复下的完全恢复(数据文件备份<旧>--新建表空间--控制文件备份<次新>--日志归档文件<新>)

    为什么会使用备份的控制文件? 实际工作中主要有两种情况:第一种:当前控制文件全部损坏,而数据文件备份,控制文件备份及当前日志处于不同SCN版本,它们之间又增加过表空间(数据文件).第二种:当前控制文件 ...

  8. SQL注入(三)

    邮给我一个密码 我们意识到虽然不能添加一条新的记录在members表中,但我们可以通过修改一个存在的记录, 这也获得了我们的证明是可行的. 从先前的步骤中,我们知道bob@example.com在系统 ...

  9. 第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据

    第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据 学习要点: 1.JSON语法 2.解析和序列化 前两章我们探讨了XML的结构化数据,但开发人员还是觉得这 ...

  10. tcp异常终止连接

    服务端: #include <sys/socket.h> #include <unistd.h> #include <sys/types.h> #include & ...