js监听事件 上滑消失下滑出现的效果 触摸与手势事件
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监听事件 上滑消失下滑出现的效果 触摸与手势事件的更多相关文章
- js判断手指的上滑,下滑,左滑,右滑,事件监听
原理:1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和staerY: 2:当触发touchmove事件的时候,再获取此时手指的横坐标moveEndX和纵坐标moveEn ...
- NestedScrollView嵌套RecycleView 滑动 实现上滑隐藏 下滑显示头部效果
废了好大的劲才弄好的,记下来 方便以后查看 public class MainActivity extends AppCompatActivity { private RecyclerView mRe ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- JS监听div的resize事件
原文地址:http://zhangyiheng.com/blog/articles/div_resize.html 需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用c ...
- js监听transition过渡事件
html <div id="mydiv"> </div> style #mydiv{ width:100px; height:100px; backgrou ...
- js 监听整个页面的回车事件
JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch; ...
- 原 JS监听回车事件
原 JS监听回车事件 发表于2年前(2014-06-04 10:16) 阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦 ...
- js监听用户的键盘敲击事件,兼容各大主流浏览器
js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...
- 原生js监听input值改变事件
哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http:// ...
随机推荐
- redis 学习笔记——redis集群
redis-cluster 简介 redis-cluster是一个分布式.容错的redis实现,redis-cluster通过将各个单独的redis实例通过特定的协议连接到一起实现了分布式.集群化的目 ...
- 在MyEclipse 2013中使用图形界面快速配置Struts2的操作方法
Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...
- UE4创建空白关卡并添加碰撞体
让我们接着上次继续学习UE4引擎,今天我们学习下怎样创建空白的关卡以及添加碰撞物体. 一. 创建空白关卡 1) 点击文件 -> 新建关卡(或者按快捷键Ctrl+N). 2) 你可以选择Defau ...
- elike.python.function()
将python用于基本的科学计算,能完全替代matlab.就最近写的一个物理模型程序来看,用python建立的物理模型的可控性,代码的层次性都优于matlab,只不过python没有matlab那样的 ...
- iOS开发-文件操作
目录操作和文件管理 学习目标 1.理解单例 2.掌握NSFileManager类常用的文件管理操 3.掌握NSFileHandle类常用的文件数据操作 4.了解NSData类的常用操作 5.掌握Pli ...
- CodeForces 157C Message
$dp$. $dp[i][j]$表示$s[i]$到$s[j]$和$t[lent-1+i-j]$到$t[lent-1]$有$dp[i][j]$位相同,然后枚举一遍$dp[i][j]$就可以算出答案了. ...
- 【NOIP2014】Day1题解+代码
Day1 T1 签到题,模拟一下随便写就能过. 不过小心像我一样表打错傻逼的调了10min. #include <algorithm> #include <iostream> ...
- canvas实现画板功能(渐变、动画、阴影...)
刚刚在博客园落户了,希望能在这认识更多大神,希望能和大家交好朋友. 闲来无事,把以前用canvas写的画板代码改进了一番,用Html5提供的表单标签给其 加了一个选择颜色的功能,因此发现了该标签的一个 ...
- 初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助
初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助,如果有bug或者更好的优化方案,也请批评与指正,谢谢,代码如下: var fs = require('f ...
- fpga之显示字符串
//必须在有效区域下显示颜色才有颜色 显示字符可以在设定一个有效区域内显示 另加两个wire 求出新的x,ymodule vga_fpga( clk,rst_n, vga_b,vga_g,vga_r, ...