jQuery iPhone слайд, который перемещает фоновое изображение, но красная полоса остается в середине

Question

У меня есть это изображение

Что я хочу сделать, это превратить его в слайдер, чтобы пользователи iphone могли перемещать его из стороны в сторону и менять канал.

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

Answer 1

У вас может быть фоновое изображение, которое является тем, что скользит, и маленькая красная полоска, которая остается на том же месте, каждое как разные изображения. Чтобы определить, какой канал выбран, вы можете проверить, какая часть изображения находится в области просмотра. Эта библиотека может быть полезна.

Answer 2

Если вы предпочитаете JQuery Ui, вам также понадобится "JQuery Ui touch punch" для событий касания и касания. Слайдер Jquery Ui не работает на сенсорных экранах из коробки.

http://furf.com/exp/touch-punch/.

Answer 3

Используя пользовательский интерфейс jQuery, вы сможете превратить изображение в div, находящийся за статической линией (используя css zindexes, для которого сверху).

Вы можете ограничить движение изображения только горизонтальной осью с помощью опции {axis:'x'}.

Чтобы получить выбранную «станцию», вы собираетесьНужно сделать некоторые преобразования между вашими пиксельными местоположениями изображений и общим положением изображения.Проверьте drag event, перечисленные в Документациях по jQuery UI .Относительная позиция к родительскому объекту определяется как ui.position