作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个跳跃运动控制的音乐播放器,菜单系统是通过跳跃运动控制的。
上下倾斜可滚动浏览菜单项,向右滑动可选择该项目,向左滑动可返回上一级菜单。
我遇到的问题是,当您在“艺术家列表”菜单上向右滑动时,它会更改为“歌曲”菜单,并且由于跳跃运动滑动手势在帧上起作用,因此它会多次触发我的功能,因此第一首歌曲会立即出现已选择。
相关代码如下:
var updateSelection = function() {
if(Math.floor(x) == x && $.isNumeric(x)){
var listLength = $(menu + ' li').size();
if (x > listLength) x = listLength;
if (x < 1) x = 1;
$(menu + ' li').removeClass('active');
$(menu + ' #' + x + artist ).addClass('active');
scrollToIt = x + artist;
idTagX = x;
if (scrollDirection == "down") {
var topPos = document.getElementById(scrollToIt).offsetTop;
document.getElementById('cssmenu').scrollTop = topPos;
//document.getElementById(scrollToIt).scrollIntoView();
}
else if (scrollDirection == "up"){
var topPos = document.getElementById(scrollToIt).offsetTop;
document.getElementById('cssmenu').scrollTop = topPos;
//document.getElementById(scrollToIt).scrollIntoView(true);
}
}
}
if(frame.hands.length > 0)
{
var hand = frame.hands[0];
pitchRadians = hand.pitch();
if (pitchRadians > 0.45) {
newX = x - 0.1;
x = roundNumber(newX, 2);
scrollDirection = "up";
updateSelection();
}
else if (pitchRadians < -0.45){
newX = x + 0.1;
x = roundNumber(newX, 2);
scrollDirection = "down";
updateSelection();
}
else {
x = parseInt(x);
updateSelection();
}
}
//--------------------------------------------------Swipe Selection
if (frame.gestures.length > 0) {
for (var i = 0; i < frame.gestures.length; i++) {
var gesture = frame.gestures[i];
//---- Swipe ----
if (gesture.type == "swipe") {
var isHorizontal = Math.abs(gesture.direction[0]) > Math.abs(gesture.direction[1]);
if(isHorizontal){
if(gesture.direction[0] > 0){
$(menu + ' #' + idTagX + artist).click();
console.log(artist);
} else {
console.log("Menu Left");
// $("#" + artist).hide();
//menu = ".artists"
}
} else {
// Vertical swipe
}
}
}
}
})
这很可能是一个简单的修复,我刚刚查看这段代码太久了,无法理解它。
最佳答案
我已经为此编写了一个解决方案,详细说明如下,以便其他用户可以查看以供将来引用。
var prevSwipe = "";
var d = new Date();
var now = d.getTime();
var prevSwipeTime = now;
function rightSwipe () {
d = new Date();
if(prevSwipe == "right") {
if(prevSwipeTime + 1000 < d.getTime()) { //time elapsed, run code
$(menu + ' #' + idTagX + artist).click();
prevSwipe = "right";
prevSwipeTime = d.getTime();
console.log("prev == right");
} // otherwise do nothing
} else {
$(menu + ' #' + idTagX + artist).click();
prevSwipe = "right";
prevSwipeTime = d.getTime();
console.log(prevSwipeTime);
console.log("prev != right");
}
}
希望这对某人有帮助!
关于javascript - 跳跃运动 : How to make swipe only trigger function once per swipe?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23872134/
我是一名优秀的程序员,十分优秀!