Мобильная галерея изображений Adobe Edge

Я использую Adobe Edge Animate для создания большей части своего веб-сайта, но я также хочу сделать мобильную версию, поэтому, очевидно, вместо событий onClick я хочу использовать события onTouch. Я просто не могу найти никакой хорошей информации о том, как использовать сенсорные события, поскольку я никогда не использовал их раньше.

Я хочу создать простую галерею изображений, которая воспроизводится вперед, когда вы проводите пальцем влево, и воспроизводится в обратном направлении, когда вы проводите пальцем вправо.

Большая проблема здесь заключается в том, как указать событию касания выполнять разные действия в зависимости от направления смахивания?


javascript html image-gallery css adobe-edge
person heckascript    schedule 10.02.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

во-первых, вы правы, вы хотите использовать три обработчика событий: touchstart, touchmove, touchend

один подход, который вы можете использовать, — это сравнить начальное положение пальца (пальцев) пользователя с конечным положением. хотя код будет варьироваться в зависимости от того, сколько пальцев вы хотите обнаружить, я опишу базовый метод, который вы можете адаптировать. чтобы обнаружить один палец, введите в обработчик события touchstart следующее:

var xStart = e.originalEvent.touches[0].pageX;
sym.setVariable('xStart', xStart);

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

xStart = sym.getVariable('xStart');
var xEnd = e.originalEvent.touches[0].pageX;

if (xEnd > xStart)
{
    sym.playReverse();
}
else if (xEnd < xStart)
{
    sym.play();
}

тогда у вас будет несколько стоп-кадров для этих изображений.

это всего лишь пример, но, надеюсь, он поможет вам начать работу. удачи!

person henry bemis    schedule 28.02.2013