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编程起步(第二课)
Jan 10 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
node实现的爬虫功能示例
May 04 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
vuex存值与取值的实例
Nov 06 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设计模式之结构模式的深入解析
2013/06/13 PHP
php的dl函数用法实例
2014/11/06 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
跟老齐学Python之Python安装
2014/09/12 Python
基于Python实现文件大小输出
2016/01/11 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
初婚未育未抱养证明
2014/01/12 职场文书
捐款倡议书
2014/04/14 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript