脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery实现相册一下滑动两次

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

 更新时间：2015年02月09日 12:00:42   作者：hukang00  
这篇文章主要介绍了jquery实现相册一下滑动两次的方法,是非常实用的图片特效技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 3种不同的ContextMenu右键菜单实现代码

    3种不同的ContextMenu右键菜单实现代码

    本文给大家分享3种不同的ContextMenu右键菜单实现代码的相关资料,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2016-11-11
  • Jquery插件编写简明教程

    Jquery插件编写简明教程

    这篇文章主要介绍了Jquery插件编写简明教程,jquery插件开发实例,需要的朋友可以参考下
    2014-03-03
  • jQuery实现弹窗居中效果类似alert()

    jQuery实现弹窗居中效果类似alert()

    本文给大家分享基于jquery实现弹窗居中效果类似于alert(),代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下
    2017-02-02
  • 基于jquery tab切换(防止页面刷新)

    基于jquery tab切换(防止页面刷新)

    tab切换，是一个很常见的效果，今天在项目中遇到这样一个问题。就是切换后，页面刷新，又重新定位到第一个上了，很是郁闷
    2012-05-05
  • 对于this和$(this)的个人理解

    对于this和$(this)的个人理解

    this指的是javascript对象而$(this)就是就jquery对象，不懂的朋友可以看看本文
    2013-09-09
  • 编写自己的jQuery提示框（Tip）插件

    编写自己的jQuery提示框（Tip）插件

    这篇文章主要介绍了编写自己的jQuery提示框（Tip）插件的方法,需要的朋友可以参考下
    2015-02-02
  • jquery Validation表单验证使用详解

    jquery Validation表单验证使用详解

    功能强大的 jquery 表单验证插件，适用于日常的 E-mail、电话号码、网址等验证及 Ajax 验证，除自身拥有丰富的验证规则外，还可以添加自定义的验证规则。兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+
    2015-04-04
  • jquery 插件实现图片延迟加载效果代码

    jquery 插件实现图片延迟加载效果代码

    前几天上QQ的在线视频网站，看到上面的影片列表页的图片有这样一种效果：当向下拉动滚动条时下面的图片才开始加载，就是说它不会一下子把所有的图片都加载出来，拉动滚动条后用户看到了才会显示，这是一个很不错的用户体验。
    2010-02-02
  • 在jquery中的ajax方法怎样通过JSONP进行远程调用

    在jquery中的ajax方法怎样通过JSONP进行远程调用

    这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用,需要的朋友可以参考下
    2014-04-04
  • jQuery事件blur()方法的使用实例讲解

    jQuery事件blur()方法的使用实例讲解

    今天小编就为大家分享一篇关于jQuery事件blur()方法的使用实例讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-03-03

最新评论