Имитация прокрутки iOS между вкладками с помощью Javascript

Question

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

Как узнать, когда вы достаточно прокрутили, а затем установите новую позицию для фокусировки? Есть ли хороший плагин jQuery для такого рода вещей? У jQuery Mobile нет такой функции.

Макет, который я имею в виду, похож на 4-5 DIVS рядом друг с другом внутри стороны с одним DIV, возможно, с перекрутом, установленным в скрытое. Затем, когда вы начинаете переходить к следующей панели, он может запускать событие, которое изменяет положение влево/вправо CSS с некоторым эффектом перехода, а затем также обновляет вкладку, чтобы показать, что выбрана новая новая панель.

Answer 1

вы должны использовать touchstart/mousedown, touchmove/mousemove и touchhend/mouseup событий для этой цели, чтобы поддерживать как сенсорные, так и настольные устройства.

• На touchstart использовать JQueryEventType объект для хранения исходных X и Y координаты, а также установить некоторые параметры для обозначения действительного красть (позволяет сказать INIT = истина)
• На TouchMove, сначала проверьте, не является ли его действительным пробелом (, если init == true), , затем снова используйте объект JQueryEventType, чтобы получить новый X и Y Позиция курсора/пальца.

Сейчас идет сложная часть: использовать эти новый X и Y положение для расчета смещения и направления. Используйте это значение для установки смещения вашего DIV (ов) или использования CSS 3.0 translate (x, y).

Например, если дельта Х> 10 (некоторое пороговое значение для фильтрации ошибок) и дельта Y ~ 0, то его движение к правой. Я бы перевел все мои DIV на RIGHT на delta X.

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

Для решения вопроса о том, когда предположить «его достаточно скользящий», Я думаю, вам придется принимать постоянное значение по вашему выбору или рассчитать его, используя ширину экрана. Если Delta X или delta Y не меньше значения удержания вставки ... отскок назад. Если это больше, чем это значение ... отскочить вперед.