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 插件,它们都是最具创新性和最省时省力的解决方案,很多都是现代化的设计和开发中碰到的问题的处理方案.如果你熟悉下面列出的任何插件,请与我们的读者 ...
随机推荐
- 【cl】sikuli下载安装
前提条件: 1.请确保你已经安装java 6 JRE 32位版本(如果是java 7 或者是64位JRE 那是不被支持的) 2.请确定你已经卸载的先前的sikuli版本(尤其是0.10.x版本) 3. ...
- SQL SERVER读书笔记:nolock
让查询语句不去申请共享锁,从而消除死锁,效果立竿见影. 缺点: 1.脏读 2.只能解决共享锁(S锁)参与的问题 3.需要修改语句本身才能使用
- luogu1313 计算系数
题目大意:给定一个多项式(ax+by)^k,请求出多项式展开后x^n*y^m 项的系数. 将原式化为(ax+by)*(ax+by)*...①,然后将其拆解,拆解时x乘了多少次,a就乘了多少次,y,b同 ...
- 单件模式(Singleton)C++实现
意图:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 实用性:1.当类只能有一个实例而且客户可以从一个众所周知的访问点访问它. 2.当这个唯一的实例应该是通过子类可扩展的,并且客户应该无需更改 ...
- Android拼图-变形金刚
开篇 学了几个月的Android开发,动手做了一个简单的拼图小游戏,没有使用游戏框架,名字也纯属娱乐,比较粗糙请大家一笑别骂. 游戏界面是一张图片切割的6*6的小图片,并将其中一块拿走,玩家通过不同的 ...
- javascript变量中基本类型和引用类型的详解解读
前言: Javascript语言中的变量和其他语言的变量有很大区别,javascript松散类型的本质,决定了它只是在特定时间时间保存特定值得名字而已.由于不存在定义某个变量必须保存何种数据类型值的规 ...
- RAP开发入门-主题更换
通过配置扩展点修改应用主题 ps:需要提前准备好主题(theme.css)文件 <!-- 注册主题扩展点 --> <extension point= ...
- Poj Maya Calendar
http://poj.org/problem?id=1008 Maya Calendar Time Limit: 1000MS Memory Limit: 10000K Total Submissio ...
- ndk编译curl以及使用
百度搜ndk curl,大多都是转发的同一篇文章,文章中提供的lcur_config.h,不一定适合你的curl版本. 后来找到http://download.csdn.net/download/cs ...
- 将自己的类封装为lib的方法
前言: Windows API中所有的函数都包含在dll中,其中有3个最重要的DLL. (1) Kernel32.dll 它包含那些用于管理内存.进程和线程的函数,例如CreateThread函数 ...