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. jenkins2 pipeline介绍

    文章来自:http://www.ciandcd.com 文中的代码来自可以从github下载: https://github.com/ciandcd   什么是jenkins2的pipeline?   ...

  2. 秀才提笔忘了字:javascript使用requestAnimationFrame实现动画

    requestAnimationFrame优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的 ...

  3. [jQuery学习系列四 ]4-Jquery学习四-事件操作

    前言:今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席 云集 听道 推酷 青年中国说 SELF格致论道 参考:http://www.365 ...

  4. 推荐 greenrobot eventbus,简化安卓开发,提高安卓维护性,优化安卓性能

    最近在研究移动开发,广泛的阅读有关cordova,apicloud,android资料.发现安卓的开发还是很简单的.再发现greenrobot eventbus开源框架不仅可以简化安卓开发,有可以大幅 ...

  5. 02_Hello World!

    hello word ? 学习任何语言,我们都喜欢在屏幕上直接输出一点什么,作为最简单基本的案例.很多人习惯输出 hello world ,世界你好.感觉很有情况的样子——然而很多人都只停留在这个阶段 ...

  6. paip.java win程序迁移linux的最佳实践

    paip.java win程序迁移linux的最佳实践 1.class load路径的问题... windows哈第一的从calsses目录加载,,而linux优先从jar加载.. 特别的是修理了ja ...

  7. java继承与多态-3个小题

    1.(1)编写一个接口ShapePara,要求: 接口中的方法: int getArea():获得图形的面积.int getCircumference():获得图形的周长 (2)编写一个圆类Circl ...

  8. 关闭Windows Update更新驱动程序

    关于Win10的更新配置,特别是自动更新驱动程序,经常会导致驱动安装错误而无法开机的问题. 此时只好开机时按F8进入高级模式恢复最后一次正确配置,或者在安全模式删除错误的驱动程序. 关于Win10的更 ...

  9. Linux下远程桌面Windows

    rdesktop-1.7.0.tar.gz [root@localhost fcitx]# tar rdesktop-1.7.0.tar.gz [root@localhost fcitx]#cd rd ...

  10. python类的特性

    #encoding=utf-8 class Province: #静态字段 memo = '这里是静态变量' def __init__(self,name,capital,leader,flag): ...