mobile touch 备用
var _scrollIndex=1;
function scrollPage(){
var _contentEle = $('.view-container'),_viewEle = _contentEle.find('.view');
var _iconEle = $('.downIconArror');
var _view_port = $('.view-port');
var _touchEvents = {
'pageYStart':'',
'pageYEnd':'',
'touchstart':function(event){
event.preventDefault();
var _touch = event.touches[0],_this = _touchEvents;
_this.pageYStart = _touch.pageY;
_view_port[0].addEventListener('touchmove',_this.touchmove,true);
_view_port[0].addEventListener('touchend',_this.touchend,true);
},
'touchmove':function(event){
event.preventDefault();
var _touch = event.touches[0],_this = _touchEvents;
_this.pageYEnd = _touch.pageY;
},
'touchend':function(event){
var _this = _touchEvents;
var _distance = _this.pageYEnd-_this.pageYStart;
if(_distance>50){
swipe.down();
}
if(_distance<-50){
swipe.up();
}
_view_port[0].removeEventListener('touchmove',_this.touchmove);
_view_port[0].removeEventListener('touchend',_this.touchend);
}
};
_view_port[0].addEventListener('touchstart',_touchEvents.touchstart);
var swipe = {
up:function(){
var _this = _contentEle;
var _initTransY = getTransform(_this);
if(Math.abs(_initTransY)==(_viewEle.length-1)*_viewEle.height()){
return;
}
if(Math.abs(_initTransY)==(_viewEle.length-2)*_viewEle.height()){
_iconEle.hide();
}else{
_iconEle.show();
}
_scrollIndex++;
scrollPageAnimate(_scrollIndex);
_this.animate({'margin-top':parseInt(_initTransY-_viewEle.height())},500);
},
down:function(){
var _this = _contentEle;
var _initTransY = getTransform(_this);
_iconEle.show();
if(_initTransY==0){
return;
}
_scrollIndex--;
scrollPageAnimate(_scrollIndex);
_this.animate({'margin-top':parseInt(_initTransY+_viewEle.height())},500);
}
}
}
mobile touch 备用的更多相关文章
- mobile touch事件
touch.js 众所周知,mobile与pc 前端开发的不同中,有一点就是事件的不同,mobile上有touchstart,touchmove,touchend等,而pc上用最多的应该还是我们的cl ...
- jquery mobile Touch事件
Touch事件在用户触摸屏幕(页面)时触发 1.jquery mobile tap tap事件在用户敲击某个元素时触发 $("p").on("tap",fucn ...
- jquery mobile touch 实例
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- 触屏touch事件记录
一.chrome中的Remote Debugging 一开始并没有用这个调试,不过后面需要多点触碰,可chrome模拟器中我没看到这个功能.突然看到了Remote Debugging,网站需要FQ才能 ...
- hammerjs & Swiper & touch & gesture
hammerjs https://hammerjs.github.io/getting-started/ http://hammerjs.github.io/recognizer-swipe/ Swi ...
- web & js & touch & gesture
web & js & touch & gesture 触摸 & 手势 https://caniuse.com/#feat=touch js https://develo ...
- JavaScript资源大全中文版(Awesome最新版)
Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...
- 超级小的web手势库AlloyFinger发布
简介 针对多点触控设备编程的Web手势组件,快速帮助你的web程序增加手势支持,也不用再担心click 300ms的延迟了.拥有两个版本,无依赖的独立版和react版本.除了Dom对象,也可监听Can ...
- 2016年4月最佳的20款 jQuery 插件推荐
这个列表包括20个我们觉得是最有用的免费的 jQuery 插件,它们都是最具创新性和最省时省力的解决方案,很多都是现代化的设计和开发中碰到的问题的处理方案.如果你熟悉下面列出的任何插件,请与我们的读者 ...
随机推荐
- Linux系统调用具体解释(怎样从用户空间进入内核空间)
系统调用概述 计算机系统的各种硬件资源是有限的,在现代多任务操作系统上同一时候执行的多个进程都须要訪问这些资源,为了更好的管理这些资源进程是不同意直接操作的,全部对这些资源的訪问都必须有操作系统控制. ...
- PlayerPrefs存储Vector3等结构数据
孙广东 2016.3.31 之前有网友询问这个问题, 当时我仅仅是 提供了一个思路, 使用json序列化.反序列化. 以下就写出两种(都是仅仅能变成字符串) 1.json的序列化.反序列化方 ...
- Sinowal Bootkit 分析-中国红客网络技术联盟 - Powered by Discuz!
訪问原文 (一)模块组成 感染过Sinowal的电脑,Sinaowal在硬盘中的分布例如以下图: ; Sector Offset ...
- luogu2303 [SDOI2012] Longge的问题
题目大意:给出n,求sum foreach i(1<=i<=n) (gcd(n, i)). 1~n有太多的数,但是n与m的最大公约数却有很多重复.所以我们枚举最大公约数k,然后让k乘以与n ...
- [NOIP 2007] 树网的核
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1999 [算法] 树的直径 + 单调队列 [代码] #include<bits/ ...
- [Javascript] 5个最佳的Javascript日期处理类库
在大家日常网站开发和web应用开发中,我们往往需要有效的调用Javascript处理日期和时间格式相关的函数,在Javascript中已经包含了部分最基本的内建处理方法. 在大家日常网站开发和web应 ...
- LeetCode Weekly Contest 21
1. 530. Minimum Absolute Difference in BST 最小的差一定发生在有序数组的相邻两个数之间,所以对每一个数,找他的前驱和后继,更新结果即可!再仔细一想,bst的中 ...
- winfrom控件——基本工具
窗体事件:属性—事件—load(双击添加) 窗体加载完之后的事件: 删除事件:先将属性事件里挂号的事件名删掉(行为里的load)再删后台代码里的事件. 控件:工具箱里(搜索—双击或点击拖动到窗体界面) ...
- P1284 三角形牧场
题目描述 和所有人一样,奶牛喜欢变化.它们正在设想新造型的牧场.奶牛建筑师Hei想建造围有漂亮白色栅栏的三角形牧场.她拥有N(3≤N≤40)块木板,每块的长度Li(1≤Li≤40)都是整数,她想用所有 ...
- webpack打包大概流程
webpack 步骤 1. 新建一个webpack.config.prod.js 2. 压缩bundle.js和index.html //设置为生产环境 new webpack.DefinePlugi ...