jQuery技术

jQuery Touchwipe Plugin 轻量级的手机触摸特效插件(javascript

字号+ 作者:H5之家 来源:H5之家 2016-02-16 17:04 我要评论( )

上次写的文章《手机触屏触摸特效javascript-TouchSwipe(依赖于jqurey库)中文说明》这个插件比较坑,笔者研究了一天后没想到这款插件竟然是不支持a标记的,太坑了,无奈之下,又找了一个比较轻量级的插件,也很简单,功能也很实用大小仅仅只有1.2K。。 这款

上次写的文章《手机触屏触摸特效javascript-TouchSwipe(依赖于jqurey库)中文说明》这个插件比较坑,笔者研究了一天后没想到这款插件竟然是不支持a标记的,太坑了,无奈之下,又找了一个比较轻量级的插件,也很简单,功能也很实用大小仅仅只有1.2K。。
这款插件的事件比上一篇文章的插件少的多的多,只有简单的上下左右滑动,但是基本上也就是这几个特效,而且插件非常小,非常适合做网站。
下面是官方demo:

$(“#imagegallery”).touchwipe({ wipeLeft:function(){alert(“left”);}, wipeRight:function(){alert(“right”);}, wipeUp:function(){alert(“up”);}, wipeDown:function(){alert(“down”);}, min_move_x:20, min_move_y:20, preventDefaultEvents:true });

怎么样,很简单吧:
wipeLeft:向左滑动
wipeRight:向右滑动
wipeUp:测试了以下。。貌似是从上往下滑动。。 我手机的问题么。
wipeDown:这个貌似从下往上滑动。如果有人不一样的话,回复以下。
min_move_x:最小滑动X轴距离。
min_move_y:最小滑动y轴距离。
preventDefaultEvents:preventDefault 被设为 true 时,滑动手势的默认事件(例如页面滚动)会被屏蔽,只执行 wipeLeft: … wipeRight: … 所限定的内容。 (感谢评论者Renfei Song的补充)

下面是我写的一个简单的例子:

<script type=”text/javascript” src=””></script> <script type=”text/javascript” src=””></script> <script type=”text/javascript”> var MyMar = setInterval(Marquee, 3000); var pic_width = 320 a = 0 function Marquee(){ a++ if(a>2){a=0} $(".focus_pic .kd").css("-webkit-transform","translateX(-"+a*pic_width+"px)") } $(".focus_pic .kd").touchwipe( { wipeLeft:function(){ if(a>1){ return(false)}else { $(".focus_pic .kd").css("-webkit-transform","translateX(-"+(a+1)*pic_width+"px)"); a=a+1 }}, wipeRight:function(){ if(a<0){ return(false)}else{ $(".focus_pic .kd").css("-webkit-transform","translateX(-"+(a-1)*pic_width+"px)"); a=a-1 } }, min_move_x: 20, min_move_y: 20, preventDefaultEvents: true }); </script> <div class=”focus_pic”> <div class=”kd”> <a href=”#”><img src=”” alt=”" /></a> <a href=”#”><img src=”–logo.jpg” alt=”" /></a> <a href=”#”><img src=”–logo(1).jpg” alt=”" /></a> </div> </div>

官方下载网址:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评