寻找移动设备的jQuery项目滚动插件

Question

我正在寻找jQuery HTML滚动插件，它将在移动设备上滑动导航，也可以在桌面上使用。

基本上我需要使用滑动手势来旋转新闻，就像在iPad IMDB应用上一样，只需在浏览器中。

以下是它的截图：

在搜索时我发现了iScroll和Sencha Touch脚本，但它们太“胖了”。

有人可以推荐这样的东西吗？

谢谢。

UPD ：在codecanyon上找到了very cool carousel，正是我需要的。可悲的是，这是商业广告。

Answer 1

您需要使用touchstart和touchmove事件（还有一个touchend事件，但在这种情况下不需要它），它们的工作方式与鼠标事件相同感觉。

以下是一个概念示例，因为我以前从未亲自使用过这些，但它应该是相当明确的。

var startX = 0, startY = 0;

$('.selector.').bind('touchstart', function(event) {
    startX = event.touches[0].pageX;
    startY = event.touches[0].pageY;
});

$('.selector.').bind('touchmove', function(event) {
    endX = event.touches[0].pageX;
    endY = event.touches[0].pageY;

    if (startX - 100 < endX)
    {
        // SWIPE LEFT CODE HERE

        // The startX - 100 is to give some leeway for the user, they have to 
        // move there finger at least 100 pixel difference to the left to trigger
    }
    elseif (endX > startX + 100)
    {
        // SWIPE RIGHT CODE HERE

        // The startX + 100 is to give some leeway for the user, they have to 
        // move there finger at least 100 pixel different to the right to trigger
    }
});

基本概念是你有一个touchstart事件，并记录他们开始的位置和touchmove事件，以确定他们正在滑动的方式，如果x较低，他们会向左滑动， x高于右，y高于高，y低于低。

这看起来是查看http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

的好资源