jquery.touchSwipe.min.js 的简单用法

来源:互联网 发布:深圳市一号仓佳速网络 编辑:程序博客网 时间:2024/09/21 08:16

要做一个手机端h5的DEMO。其中一个效果不能用点击来实现,要求必须使用触摸滑动切换来实现。对于zepot.js来说,我不是很熟悉,其功能也远远没有jQuery来得强大。因此,决定使用jq实现。问题是,jq是没有这个事件的。于是,百度之。找到jquery.touchSwipe.min.js这个插件。

官方文档全部中文,实在看不懂。看示例吧,也没看懂。我嘞个去,对不起当年的英语老师啊,恨不能回炉再造啊!!

好歹研究了一下,终于找到一个应用示例。简单把代码列在这里:

$(window).swipe({    swipeLeft:function(){        // 向左滑动执行    },    swipeRight:function(){        // 向右滑动执行    }});

一堆参数我就不折腾了。默认这样就能向左滑,向右滑了。

更多内容,请参考:
官方地址:https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
演示地址:http://labs.rampinteractive.co.uk/touchSwipe/demos/Basic_swipe.html (非常慢)

如果上天给我再来一次的机会,我一定好好学习英语~

补充

如果某个盒子加了滑动效果,而其中某个或者多个子元素不需要这个滑动效果怎么做呢?

有两种方法,一种是这样写:

win.swipe({    swipeLeft:function(){        //向左滑动    },    swipeRight:function(){        //向右滑动    },    excludedElements:$.fn.swipe.defaults.excludedElements+", #bar_nav , #banner ,#my_nav"});

如上,加上最后一句,把不需要的ID写在后面即可。注意逗号。

另外,还有一种方法,就是直接给不需要滑动的元素加上.noSwipe 这个样式名即可。

0 0
原创粉丝点击