jQuery环岛动量滚动

有人知道我将如何通过jQuery或JavaScript为触摸屏设备实现环岛式滚动，因此如果我滚动/拖动环岛，环岛将在滚动时旋转吗

---

是否有人可以连接一个示例？

如果您想要自定义滚动路径，则可能会帮助您。。。如果您“只是”想在滚动时显示一个环形交叉口，那么我建议您通过JS观察滚动事件，并通过CSS进行一些转换

---

还是我完全误解了您的意思？

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

$(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 });
        }
    }
});​

$（文档）.on（'vmousedown'，函数（事件）{
//刷卡已开始，请保存起点以备以后使用
$.data（这是“滑动开始”，“x:event.pageX，y:event.pageY}）；
}).on（'vmouseup'，函数（事件）{
//将刷卡开始日期设置为空，以便我们可以重新开始，
//这允许您通过单次滑动触发多个控制事件，
//因此，长时间的滑动比短时间的滑动触发更多的控制事件
$.data（此“滑动开始”，空）；
}).on（'vmousemove'，函数（事件）{
if（$.data（此“滑动开始”）！=null）{
//在这里，我们可以看到刷走了多远，朝着什么方向
var distanceX=$.data（这是“滑动开始”）.x-event.pageX，
distanceY=$.data（这是“滑动开始”）.y-event.pageY，
distanceT=Math.sqrt（Math.pow（Math.abs（$.data（这个，'swipe start'）.x-event.pageX），2）+Math.pow（Math.abs（$.data（这个，'swipe start'）.y-event.pageY），2））；
//让用户在决定做什么之前至少滑动50像素
如果（距离>50）{
如果（距离x>0&&distanceY>0）{
//用户向上向右移动
$（'.ui content'）.append（'您上/左
'）；
}else if（distanceX<0&&distanceY>0）{
//用户向上走到左边
$（'.ui content'）.append（'你上了/右了
'）；
}else if（距离x<0&&distance y<0）{
//用户向下走到左边
$（'.ui content'）.append（'你去了/右了
'）；
}否则{
//用户向下走到右边
$（'.ui-content'）.append（'你走下/走下
'）；
}
//如果用户继续刷卡，请重置“刷卡开始”
$.data（这是“滑动开始”，“x:event.pageX，y:event.pageY}）；
}
}
});​

然后在适当的

if/Then

语句中放置控制UI元素的代码

请注意，

vmousedown

/

vmouseup

/

vmousemove

是用于鼠标和触摸输入的jQuery Mobile自定义事件

更新 我对上面的代码进行了一些更新，使其更易于使用，还有一些问题需要解决。下面是一个工作演示：

---

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

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

及

---

谢谢！我试图在用户刷卡时实时移动图形，我想稍微修改一下就可以了。是的，只需将最小距离更改为非常低的距离。与问题完全无关（想要增加滚动动量），但这是一个多么棒的链接。干杯：）