如何管理移动网站中旋转木马的水平滚动?

时间:2012-11-29 15:50:09

标签: jquery jquery-mobile mobile scroll

我有一个带有旋转木马图片的网站。在移动设备上,当我将手指水平移动时,我想“移动”这个旋转木马。

这个轮播已准备好工作,已经完成了jquery(但是使用点击处理程序处理)。我需要用水平移动来处理它。

是否有一个jquery插件可以让我处理这个动作?

1 个答案:

答案 0 :(得分:1)

如果您使用的是jQuery mobile,则可以轻松使用滑动事件。

示例:

$("#carousel").bind('swipeleft',function(event, ui){

});

如果您不使用jQM,请查看此框架:http://wipetouch.codeplex.com/。它很轻巧。还有一些其他框架,但我从未使用过它们。几个月前,我创建了一个带有轮播和jQM滑动事件的jQM应用程序。它工作正常,没有性能问题。

编辑:

这是一个工作轮播示例(使用swipeleft事件,你也可以实现swiperight,但这只是一个例子)给你:http://jsfiddle.net/Gajotres/Np3G4/我已经在我的电脑上测试了它(只需将你的鼠标向左拖动) Android 4.1(向左滑动),但根据我过去的经验,它也适用于iPad(所以我相信它应该适用于iPhone)。此代码是此carousel和我对常见jQM滑动事件的实现的组合。您仍然可以仅将jQM框架用于滑动事件。

编辑2:

此版本适用于没有jQuery移动框架的iPad:http://jsfiddle.net/Gajotres/qCB6w/。它使用了touchwipe框架:http://www.netcu.de/jquery-touchwipe-iphone-ipad-library。我希望这就是让它工作所需的一切。