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. linux下ssh远程登录服务器入门操作

    使用用户名密码登录 在命令行中输入命令: ssh username@ip_address -p port 之后系统会提示输入密码,输入后即可登录 如果不添加-p选项,则默认是22端口 还可以使用-l选 ...

  2. duilib进阶教程 -- 改进窗口拖动 (12)

    现在大家应该都知道caption="0,0,0,32",是指示标题栏区了吧,如果想要整个窗口都能拖动呢? 那直接把高度改成和窗口一样不就得了~O(∩_∩)O~ 嗯,这样是可以,比如 ...

  3. atitit.ajax bp dwr 3.的注解方式配置使用流程总结.....

    atitit.ajax bp dwr 3.的注解方式配置使用流程总结..... 1. 下载  dwr.jar 1M 1 2. 配置注解方式..web.xml 1 3. Class 配置 2 4. 测试 ...

  4. 盘点mysql中容易被我们误会的地方

    引语:mysql作为数据库的一大主力军,到处存在于我们各种系统中,相信大家都不陌生!但是,你知道你能用不代表你知道细节,那我们就来盘点盘点其中一些我们平时不太注意的地方,一来为了有趣,二来为了不让自己 ...

  5. jQuery实现左移右移

    <html> <head> <meta charset="utf-8"> <title>完成左移右移</title> & ...

  6. WindowsPhone App如何扩展能够使用的内存

    目前手机系统中对App的内存使用都是有限制的,尤其是对于Android和WindowsPhone这样的平台,因为机型很多,配置高低不同因此对于同一个App在不同的手机上运行的效果也不同. WP上通常对 ...

  7. 详解Bootstrap表单组件

    表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  _forms.scss boot ...

  8. Redis info参数总结(转)

    Redis官网对 info 已经讲解的比较清楚的,参考文档 . 可以看到,info的输出结果是分几块的,有Servers.Clients.Memory等等,通过info后面接这些参数,可以指定输出某一 ...

  9. RFID 读写器 Reader Writer Cloner

    RFID读写器的工作原理 RFID的数据采集以读写器为主导,RFID读写器是一种通过无线通信,实现对标签识别和内存数据的读出和写入操作的装置. 读写器又称为阅读器或读头(Reader).查询器(Int ...

  10. Open vSwitch实践——VLAN

    # virt-clone --original=centos65 --name=vm2 --file=vm2.qcow2 正在克隆 centos65.qcow2                     ...