элементы панорамы на ощупь - jQuery - PullRequest
Новая
       28

элементы панорамы на ощупь - jQuery

1 голос
/ 04 августа 2011

Я пытаюсь панорамировать элементы на ощупь, я использую следующее, чтобы вычислить расстояние, которое прошел пользователь (и добавить переходы / функции после инициализации свайпа). Как получить значения свипа и анимации в реальном времени?скажем, DIV, чтобы следовать за пальцем?

Я использую следующий код для достижения функциональности смахивания:

Автономный метод касания jQuery?

1 Ответ

1 голос
/ 04 августа 2011

вам нужно немного разобрать скрипт, чтобы получить необходимую вам функциональность. в основном, то, что у вас есть, это сохранение «удара» в одно событие, вам нужно захватить событие touchMove примерно так: 

//add to the decleration:
var defaults = {
    threshold: {
        x: 30,
        y: 10
    },
    swipeLeft: function() { alert('swiped left') },
    swipeRight: function() { alert('swiped right') },
    //THIS:
    swipeMove: function(distance) { alert('swiped moved: '+distance.x+' horizontally and '+distance.y+' vertically') },
    preventDefaultEvents: true
};

//add this to the init vars section
var lastpoint = {x:0, y:0}

//add an init to the lastpoint at start of swipe
function touchStart(event) {
        console.log('Starting swipe gesture...')
        originalCoord.x = lastpoint.x = event.targetTouches[0].pageX
        originalCoord.y = lastpoint.y = event.targetTouches[0].pageY
    }

//this is where you do your calculation
function touchMove(event) {
        if (defaults.preventDefaultEvents)
            event.preventDefault();

        var difference = {
            x:event.targetTouches[0].pageX - lastpoint.x,
            y:event.targetTouches[0].pageY - lastpoint.y
        }
        //call the function
        defaults.swipeMove(difference);

        finalCoord.x = lastpoint.x = event.targetTouches[0].pageX 
        finalCoord.y = lastpoint.y = event.targetTouches[0].pageY
    }

в любом случае должно быть что-то подобное, хотя Хавнт проверил это.

...