寻找适用于移动设备的 jQuery 项目滚动器插件 [关闭]答案

【问题标题】：Looking for jQuery items scroller plugin for mobile [closed]寻找适用于移动设备的 jQuery 项目滚动器插件 [关闭]
【发布时间】：2011-11-29 14:23:27
【问题描述】：

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

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

这是它的截图：

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

谁能推荐这样的东西？

谢谢。

UPD：刚刚在 codecanyon 上找到 very cool carousel，正是我需要的。可惜是商业的。

【问题讨论】：

标签： javascript jquery css mobile scroll

【解决方案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 先高后低。

这看起来是一个很好的资源来查看http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

【讨论】：