jquery实现相册一下滑动两次的方法


Posted in Javascript onFebruary 09, 2015

本文实例讲述了jquery实现相册一下滑动两次的方法。分享给大家供大家参考。具体实现方法如下:

var t1=null; //定义为全局变量

$('body').on('touchstart', '#gallerySlider img', function(e){
var touch = e.originalEvent,
startX = touch.changedTouches[0].pageX;
if (t1 == null){
    t1 = new Date().getTime();
}else{    
    var t2 = new Date().getTime();
    if(t2 - t1 < 500){
      t1 = t2;
      return;
    }else{
      t1 = t2;
    }
}

slider.on('touchmove',function(e){
event.stopPropagation();
touch = e.originalEvent.touches[0] ||
e.originalEvent.changedTouches[0];

if(touch.pageX - startX > 10){
slider.off('touchmove');
showPrevious();
}
else if (touch.pageX - startX < -10){
slider.off('touchmove');
showNext();
}
});
return false;
}).on('touchend',function(){
slider.off('touchmove');
});

当手指滑动开始的时候记录下时间,结束的时候在记录下时间,如果两个时间差相隔很近,就结束。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
js实现iframe动态调整高度的代码
Jan 06 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
深入探讨JavaScript String对象
Mar 09 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
vue开发拖拽进度条滑动组件
Sep 21 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
js点击选择文本的方法
Feb 09 #Javascript
JS动态加载当前时间的方法
Feb 09 #Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 #Javascript
angularJS 入门基础
Feb 09 #Javascript
javascript中函数作为参数调用的方法
Feb 09 #Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 #Javascript
angularJS 中$scope方法使用指南
Feb 09 #Javascript
You might like
转PHP手册及PHP编程标准
2006/12/17 PHP
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
文本加密解密
2006/06/23 Javascript
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
python之wxPython菜单使用详解
2014/09/28 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
python dlib人脸识别代码实例
2019/04/04 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
HTML5通用接口详解
2016/06/12 HTML / CSS
小学校长汇报材料
2014/08/20 职场文书
责任书格式
2015/01/29 职场文书