var startX, startY, endX, endY;

$(".detailImg").on("touchstart", touchStart);
$(".detailImg").on("touchmove", touchMove);
$(".detailImg").on("touchend", touchEnd);

function touchStart(event) {
    var touch = event.originalEvent.targetTouches[0];
    startX = touch.pageX;
    event.preventDefault();//在andorid下不触发touchend解决方案
};
function touchMove(event) {
    var touch = event.originalEvent.targetTouches[0];
    endX = (startX - touch.pageX);
};
function touchEnd(event) {
    if (endX > 10)
        nextImgCallBack();
    else if (endX < -10)
        proImgCallBack();

endX = 0; startX = 0;
};

js webapp 滑动事件的更多相关文章

  1. 移动端js手指滑动事件初体验

    今天在公司遇到做一个移动端手指滑动的效果,刚開始用了swiper.js插件发现效果不好(文字存在模糊效果).后来查了一些资料,自己手写了一个使用原生js写的滑动效果. 以下直接上代码: <!do ...

  2. JS移动客户端--触屏滑动事件 banner图效果

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  3. 移动端上下滑动事件之--坑爹的touch.js

    下面的方法,不知道是操作方法不对还是啥.  在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...

  4. 移动端上下滑动事件之--坑爹的touch.js

    原文   http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...

  5. js的touch事件的实际引用

    一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...

  6. hammer.js的六大事件

    1.Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在触屏开发中比较常用: Panstart 拖动开始 Panmove 拖动过程 Panend 拖动结束 Panc ...

  7. webview滑动事件 与内部html左右滑动事件冲突问题的解决办法

    最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样: 开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现 ...

  8. js的Touch事件

    js的touch事件,一般用于移动端的触屏滑动$(function(){document.addEventListener("touchmove", _touch, false); ...

  9. 移动设备、手机浏览器Javascript滑动事件代码

    以下经过本人测试成功. 测试平台:三星S5830I 操作系统:Android 2.3.6 浏览器:UC浏览器 HTML标准:HTML5 测试了三个事件:touchstart.touchmove 和 t ...

随机推荐

  1. 深入浅出OOP(五): C#访问修饰符(Public/Private/Protected/Internal/Sealed/Constants)

    访问修饰符(或者叫访问控制符)是面向对象语言的特性之一,用于对类.类成员函数.类成员变量进行访问控制.同时,访问控制符也是语法保留关键字,用于封装组件. Public, Private, Protec ...

  2. JQuery以JSON方式提交数据到服务端

    JQuery将Ajax数据请求进行了封装,从而使得该操作实现起来容易许多.以往我们要写很多的代码来实现该功能,现在只需要调用$.ajax()方法,并指明请求的方式.地址.数据类型,以及回调方法等.下面 ...

  3. SQL——用户定义函数

    根据用户定义函数返回值的类型,可将用户定义函数分为如下三个类别: (1) 返回值为可更新表的函数 若用户定义函数包含单个 SELECT 语句且该语句可更新,则该函数返回的表也可更新,这样的函数称为内嵌 ...

  4. 19数据表的创建-普通表&临时表-天轰穿大话数据库视频教程

    关键字:数据表 数据库性能 临时表 天轰穿 sqlserver 数据库大纲:数据表的特点,数据表的类型及用法,SQL创建数据表,创建临时表,全局临时表 优酷超清地址 腾讯超清地址 原文地址:http: ...

  5. SQL Server如何提高数据库备份的速度

    对于一个数据库完整备份来说,备份的速度很大程度上取决于下面两个因素:读磁盘数据.日志文件的吞吐量,写磁盘数据文件的吞吐量. 下图是备份过程中磁盘的变化情况: 读吞吐量 读吞吐量的大小取决于磁盘读取数据 ...

  6. Asp.net WebAPI 单元测试

    现在Asp.net webapi 运用的越来越多,其单元而是也越来越重要.一般软件开发都是多层结构,上层调用下层的接口,而各层的实现人员不同,一般大家都只写自己对应单元测试.对下层的依赖我们通过IOC ...

  7. Windows 7 中设置VPN(PPTP连接方式)

    第一步:打开控制面板-网络和共享中心(如图) 第二步:点击-设置新的连接或网络(如图) 第三步:选择-连接到工作区-下一步(如图) 第四步:如果已经存在其他连接,则在这一步选择”否,创建新连接“:如果 ...

  8. 聊聊CSS postproccessors

      阿里妈妈 @一丝 准备发布其CSSGrace,即CSS后处理插件,于是顺便聊聊CSS postprocessors. 从Rework说起 Rework是TJ大神开发的CSS预处理框架.但为什么会出 ...

  9. HDU 4762 Cut the Cake(公式)

    Cut the Cake Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  10. iPhone设备字体详解

    做iPhone开发的同学一定对:UIFont systemFontOfSize.boldSystemFontOfSize.italicSystemFontOfSize很熟悉,但你们知道它们都是什么字体 ...