有谁知道我将如何通过 jQuery 或 JavaScript 为触摸屏设备实现环形交叉口样式滚动，所以如果我滚动/拖动环形交叉口会随着我滚动而旋转？
有人可以举个例子吗？
问问题
2635 次
3 回答
2
您可以捕获“滑动”开始的点，然后跟踪它的运动以确定要做什么：
$(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//是用于鼠标和触摸输入的 jQuery Mobile 自定义事件vmouseup。vmousemove
更新
我对上面的代码进行了一些更新，使其更加用户友好，还有一些我必须解决的问题。这是一个工作演示：http: //jsfiddle.net/sRxFC/1/
请注意，如果您想涉及动量，您还需要跟踪滑动的速度以确定速度而不仅仅是方向。
于 2012-04-22T19:40:19.120 回答
0
如果你想要自定义滚动路径，那么这个 jQuery 插件可能会帮助你......如果你“只是”想在滚动时显示一个环形交叉路口，那么我建议通过 JS 观察滚动事件并通过 CSS 进行一些转换
还是我完全误解了你？
于 2012-04-22T19:39:22.070 回答