Галерея изображений Javascript для мобильных телефонов

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

Я хотел бы, чтобы он перемещал изображение на касании в зависимости от направления движения пальца, и если вы сделаете небольшой жест жестов, я бы хотел, чтобы он перемещал изображение на всем протяжении, или если салфетка не была достаточно большой, переместите div обратно в исходное положение по оси x.

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

Я думаю, что это будет что-то вроде этого:

На touchstart -Присвоить переменный х позиции touchstart

На TouchMove -Присвоить переменные для й позиции TouchMove -Присвоить переменную для TouchMove минус touchstart - добавить (TouchMove минус touchstart) к текущим х позициям DIV

на touchend - если TouchMove => touchstart + 50px затем добавить 1000px - (TouchMove-touchstart) в положение DIVS х

-else, если TouchMove = < touchstart - 50px затем минус 1000px + (TouchMove - touchstart) от дивы х позиции

Else минус (touchmove - touchstart) из положения x div

Можно ли перевести этот ^^^ в javascript?

источник

2013-03-13 EmmaGamma

Если у вас действительно есть проблема, есть много вещей, чтобы рассмотреть. Вам нужно будет сделать его независимым от платформы, решить, нужно ли анимировать анимацию JavaScript, CSS3 или немного того и другого. Он должен быть отзывчивым и позволять загружать изображения по требованию и т. Д. Как насчет обратной совместимости?

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

Так что, чтобы ответить на ваш вопрос, нет, это не просто оживит сам по себе. Он не будет двигаться плавно без какого-либо умного и эффективного JavaScript или CSS3 animations.

Я бы порекомендовал использовать одну из библиотек MANY JQuery, которые уже существуют, чтобы сделать это за вас. Существует множество бесплатных библиотек, которые отлично работают. После быстрого поиска я нашел его:

http://www.photoswipe.com/, который, кажется, делает именно то, чего вы пытаетесь достичь.

источник

2013-03-14 00:45:21 Melon

Если позиция x изменяется в зависимости от текущего положения пальца во время касания, то он будет двигаться с любой скоростью, которую движется ваш палец, и с точки зрения того, чтобы она играла вперед или назад на экране, если салфетка была достаточно большой, я бы, вероятно, хотел, чтобы он играл вперед с заданной скоростью и легкостью. В идеале я бы не хотел использовать библиотеку или плагин любого типа. Я хочу просто использовать простой javascript, но я просмотрю фотошоп и посмотрю, понравится ли мне это. – EmmaGamma

Хорошо, посмотрев на это, у меня есть несколько вопросов об этом. Он явно работает очень хорошо и совместим со всеми браузерами и т. Д. ... но как я могу изменить стили для него? Кроме того, можно ли использовать только часть слайд-шоу, но не миниатюры? Если я смогу полностью настроить его таким образом, мне будет гораздо интереснее. В основном, я хочу максимизировать свой контроль над тем, как все это выглядит и действует, поэтому я бы предпочел написать код вручную, но если я могу изменить CSS для всего и использовать только те части, которые я хочу использовать, Я, вероятно, поеду с ним. – EmmaGamma

просто ответил на один вопрос для себя, можно просто использовать слайд-шоу без эскизов. – EmmaGamma

Галерея изображений Javascript для мобильных телефонов

ответ

Смежные вопросы