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 备用的更多相关文章

  1. mobile touch事件

    touch.js 众所周知,mobile与pc 前端开发的不同中,有一点就是事件的不同,mobile上有touchstart,touchmove,touchend等,而pc上用最多的应该还是我们的cl ...

  2. jquery mobile Touch事件

    Touch事件在用户触摸屏幕(页面)时触发 1.jquery mobile tap tap事件在用户敲击某个元素时触发 $("p").on("tap",fucn ...

  3. jquery mobile touch 实例

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  4. 触屏touch事件记录

    一.chrome中的Remote Debugging 一开始并没有用这个调试,不过后面需要多点触碰,可chrome模拟器中我没看到这个功能.突然看到了Remote Debugging,网站需要FQ才能 ...

  5. hammerjs & Swiper & touch & gesture

    hammerjs https://hammerjs.github.io/getting-started/ http://hammerjs.github.io/recognizer-swipe/ Swi ...

  6. web & js & touch & gesture

    web & js & touch & gesture 触摸 & 手势 https://caniuse.com/#feat=touch js https://develo ...

  7. JavaScript资源大全中文版(Awesome最新版)

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

  8. 超级小的web手势库AlloyFinger发布

    简介 针对多点触控设备编程的Web手势组件,快速帮助你的web程序增加手势支持,也不用再担心click 300ms的延迟了.拥有两个版本,无依赖的独立版和react版本.除了Dom对象,也可监听Can ...

  9. 2016年4月最佳的20款 jQuery 插件推荐

    这个列表包括20个我们觉得是最有用的免费的 jQuery 插件,它们都是最具创新性和最省时省力的解决方案,很多都是现代化的设计和开发中碰到的问题的处理方案.如果你熟悉下面列出的任何插件,请与我们的读者 ...

随机推荐

  1. 关于Linux静态库和动态库的分析

    关于Linux静态库和动态库的分析 关于Linux静态库和动态库的分析 1.什么是库 在windows平台和linux平台下都大量存在着库. 本质上来说库是一种可运行代码的二进制形式.能够被操作系统加 ...

  2. JS计算两时间的天数

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body>& ...

  3. 2014年辛星解读css第六节

    这一节我们就要讲到布局了,事实上布局本身特别简单.可是要合理的布好局就不那么简单了,就像我们写文章一样.写一篇文章非常easy,可是要写一篇名著就非常难了,这须要我们扎实的功底和对文学的理解,可是.千 ...

  4. [APIO 2010] 巡逻

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1912 [算法] 树的直径 [代码] #include<bits/stdc++. ...

  5. Java-杂项:Float 加减精度问题

    ylbtech-Java-杂项:Float 加减精度问题 1.返回顶部 1. java float 加减精度问题在取这个字段的时候转换成BigDecimal就可以了同时,BigDecimal是可以设置 ...

  6. 关于类和对象的进一步讨论 C++

    如果一个类中所有成员函数都是公用的,则可以在定义对象时对数据成员进行初始化: class  Time { public: hour; minute; sec; }; Time t1={14,15,23 ...

  7. php处理传值为空

    if(isset($_GET['id'])){}else{}isset($_GET['id'])==null

  8. Hadoop MapReduce编程 API入门系列之MapReduce多种输出格式分析(十九)

    不多说,直接上代码. 假如这里有一份邮箱数据文件,我们期望统计邮箱出现次数并按照邮箱的类别,将这些邮箱分别输出到不同文件路径下. 代码版本1 package zhouls.bigdata.myMapR ...

  9. website robots.txt 防爬虫 措施

    robots.txt文件用法举例: 1. 允许所有的robot访问 User-agent: * Allow: / 或者 User-agent: * Disallow: 2. 禁止所有搜索引擎访问网站的 ...

  10. Java单例模式解析(收藏)

    在GoF的23种设计模式中,单例模式是比较简单的一种.然而,有时候越是简单的东西越容易出现问题.下面就单例设计模式详细的探讨一下. 所谓单例模式,简单来说,就是在整个应用中保证只有一个类的实例存在.就 ...