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 相关文章推荐
jQuery cdn使用介绍
May 08 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
解决小程序无法触发SESSION问题
Feb 03 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时间处理类操作示例
2018/09/05 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
Python扩展内置类型详解
2018/03/26 Python
解决Django中多条件查询的问题
2019/07/18 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
信息管理专业学生自荐信格式
2013/09/22 职场文书
幼儿园实习自我鉴定
2013/12/15 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
敬老院标语
2014/06/27 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL