更新

Question

有没有人知道我将如何通过jQuery或JavaScript实现触摸屏设备的环形交叉滚动样式，所以如果我滚动/拖动环形交叉口会在我滚动时旋转？

有人可以联系一个例子吗？

Answer 1

您可以捕捉“滑动”开始的位置，然后跟踪其动作以确定要执行的操作：

$(document).on('vmousedown', function (event) {

    //the swipe has started, get the starting point saved for later
    $.data(this, 'swipe-start', { x : event.pageX, y : event.pageY });
}).on('vmouseup', function (event) {

    //set the swipe-start date to null to we can start anew,
    //this allows you to fire more than one control event with a single swipe,
    //so long swipes trigger more control events than short ones
    $.data(this, 'swipe-start', null);
}).on('vmousemove', function (event) {
    if ($.data(this, 'swipe-start') != null) {
        //here we can see how far the swipe has gone and in what direction
        var distanceX = $.data(this, 'swipe-start').x - event.pageX,
            distanceY = $.data(this, 'swipe-start').y - event.pageY,
            distanceT = Math.sqrt(Math.pow(Math.abs($.data(this, 'swipe-start').x - event.pageX), 2) + Math.pow(Math.abs($.data(this, 'swipe-start').y - event.pageY), 2));

        //let the user swipe at least 50 pixels before deciding what to do
        if (distanceT > 50) {
            if (distanceX > 0 && distanceY > 0) {
                //user went up and to the right
                $('.ui-content').append('<p>You went up/left</p>');
            } else if (distanceX < 0 && distanceY > 0) {
                //user went up and to the left
                $('.ui-content').append('<p>You went up/right</p>');
            } else if (distanceX < 0 && distanceY < 0) {
                //user went down and to the left
                $('.ui-content').append('<p>You went down/right</p>');
            } else {
                //user went down and to the right
                $('.ui-content').append('<p>You went down/left</p>');
            }
            //reset the 'swipe-start' incase the user keeps swiping
            $.data(this, 'swipe-start', { x : event.pageX, y : event.pageY });
        }
    }
});

然后在正确的if/then语句中放置控制UI元素的代码。

请注意，vmousedown / vmouseup / vmousemove是用于鼠标和触摸输入的jQuery Mobile自定义事件。

更新

我更新了上面的代码以便更加用户友好，还有一些问题我不得不解决。这是一个有效的演示：http://jsfiddle.net/sRxFC/1/

请注意，如果您想要涉及动量，您还需要跟踪滑动的速度以确定速度而不仅仅是方向。

Answer 2

如果您想要自定义滚动路径，那么this jQuery plugin可能对您有帮助......如果您只是＆＃34;只是＆＃34;想要在滚动时显示一个环形交叉口然后我建议通过JS观察滚动事件并通过CSS进行一些转换

还是我完全误解了你？

Answer 3

我在尝试使用jQuery插件Roundabout时遇到了这个问题。如果你想要的东西接近开箱即可，我强烈推荐这个插件，它能够通过enableDrag属性支持拖动/滑动。到目前为止我只在iOS设备上进行了测试，但它在那里运行良好，我想它可以在其他触摸平台上运行。

Roundabout Project Page和 How to enable Drag/Swipe

jQuery环形交叉动量滚动

3 个答案:

更新