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. C#中的StringBuilder

    1. 使用StringBuilder的好处 由于string对象是不可更改的,我们每次使用string类的方法时,都会在内存中重新创建一个新的string对象,这时候就要为该对象分配内存空间了.如果在 ...

  2. CSS3样式linear-gradient的使用

    linear-gradient linear-gradient是CSS3中新增的样式,主要用于颜色的渐变效果.MDN地址 linear-gradient在不同内核下使用方式不同,详细内容可参考w3cp ...

  3. 用C++实现斐波那契数列

    我是一个C++初学者,控制台输出斐波那契数列. 代码如下: //"斐波那契数列"V1.0 //李国良于2017年1月12日编写完成 #include <iostream> ...

  4. Apache Tomcat部署java web项目

    本教程安装环境为windows服务器 在服务器中下载安装JDK JDK下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8 ...

  5. C#Dictionary集合的使用

    题目:输入一串字符串字母,比如:Welcome to China,比较每个字母出现的次数,不区分大小写. 解决这道题的方法很多.可能一百个人有一百个思路.当时第一眼看到这个题我的思路是:先将接受的一串 ...

  6. JS返回HTML 传递参数

    var html="<a title=\"Remove\" style='cursor:pointer' cdata='" + id + "' ...

  7. Hadoop基本命令详解

    调用文件系统(FS)Shell命令应使用bin/hadoop fs <args>的形式.所有的的FS shell命令使用URI路径作为参数.URI路径详解点击这里. 1.cat 说明:将路 ...

  8. CentOS7配置OpenCV2.4.13

    以管理员身份运行su root输入密码 安装依赖包 yum install gcc gcc-c++ gtk2-devel gimp-devel gimp-devel-tools gimp-help-b ...

  9. 标准I/O 缓存

    标准I/O提供了三种类型的缓存: (1)全缓存.在这种情况下,当填满标准I/O 缓存后才进行实际 I/O 操作.对于驻在磁盘上的文件通常是由标准I/O库实施全缓存的.在一个流上执行第一次I/O操作时, ...

  10. MATLAB中的多项式运算

    作者:长沙理工大学 交通运输工程学院 王航臣 1.多项式求根 在MATLAB中求取多项式的根用roots函数. 函数:roots 功能:一元高次方程求解. 语法:roots(c) 说明:返回一个列向量 ...