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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
JavaScript继承与多继承实例分析
May 26 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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
海贼王:最美的悬赏令!
2020/03/02 日漫
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
深入浅析Python中的yield关键字
2018/01/24 Python
Django开发的简易留言板案例详解
2018/12/04 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
Python八皇后问题解答过程详解
2019/07/29 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
python获取引用对象的个数方式
2019/12/20 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
Whistles官网:英国女装品牌
2020/08/14 全球购物
技术总监的工作职责
2013/11/13 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
千手观音观后感
2015/06/03 职场文书
农村婚庆主持词
2015/06/29 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
寒假致家长的一封信
2015/10/10 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书