Может ли «волшебная» html-страница, подобная этой, быть построена с использованием jquery, или она требует flash?

Question

Мне нужно создать маленького мастера, который будет выглядеть так , где вы проводите человека через мастера и получаете изображение, обновляемое с каждым выбором.По нескольким причинам, таким как совместимость с iPad, я не могу использовать флэш-память, как на этом сайте.Насколько близко этот пользовательский опыт можно получить, просто используя javascript и jquery.Есть ли примеры, которые могли бы делать подобные вещи (не могу найти что-либо через Google с таким типом пользовательского опыта)

Answer 1

У меня был хороший опыт использования этого:

https://github.com/kflorence/jquery-wizard

Для реализации многошагового мастера с ветвлением. Я просто использовал обычный jQuery для добавления некоторых дополнительных эффектов, таких как анимация перехода и т. Д.

Answer 2

Это можно сделать с помощью JQuery, и вы, вероятно, можете сделать его очень привлекательным. Однако , Flash и другие подобные технологии, как правило, облегчают создание сайтов такого типа или, по крайней мере, требуют гораздо меньшего количества кодирования.

Answer 3

Должно быть возможно в HTML5. http://www.html5rocks.com/ - хороший сайт с демонстрацией всех возможностей HTML5.

Answer 4

Как все говорят, вы можете сделать это с помощью jquery.

Я бы сделал большинство анимаций с помощью простых картинок (например, эти маленькие блестящие блестки могут быть в формате .gif).

Эффекты наведения на курсор довольно просты, вы можете пойти так же просто, как заменить картинку функцией .hover() в jquery.

AFAIK Единственное, что действительно невозможно сделать в jQuery, - это большие анимации (больше, чем у .gif), для полноценного видео потребуется кнопка воспроизведения с использованием HTML5 (я думаю) или flash.

Answer 5

Это на 100% возможно без использования Flash. Есть несколько примеров форм с несколькими состояниями в JavaScript, использующих jQuery, к которым вы можете обратиться за руководством. Два, которые приходят на ум, это Living Social и Groupon, они делают это, но гораздо менее талантливо, как пример, который вы привели.

Вот ключевые вещи:

1. Вы несете ответственность за обновление пользовательского интерфейса в каждой части формы
2. Все значения попадают в скрытые поля ввода, пока форма не будет заполнена
3. Вы не ограничены в анимации или переходе, это можно рассматривать как любой другой опыт ODM
4. Проверка должна происходить в каждом состоянии формы, чтобы пользователю не приходилось возвращаться назад, чтобы исправить ошибку
5. Используйте CSS-спрайты, так как вы не хотите, чтобы пользователь ждал загрузки изображений

Удачи в вашей форме и не стесняйтесь задавать любые другие вопросы, необходимые для ее выполнения.

Answer 6

Wijmo делает компонент jquery точным для этой цели:

Мастер Wijmo

Он прост в использовании, и если вы знаете jquery, вы знаете wijmo = D

Answer 7

Вот пример сайта, который делает то, что вы хотите и многое другое ...

http://custom.case -mate.com / imakemycase /

Он основан на JavaScript с библиотекой casalab (и, возможно, jQuery).

Однако, как признается, такие сайты гораздо сложнее создать в javascript, чем во flash. Так как от вас требуется большая часть графического создания и редактирования кода. Который, если вы не очень склонны к коду (я думаю, многие здесь, ха-ха). Это чрезвычайно сложный процесс. Графический интерфейс во флэш-памяти значительно упрощает процесс перетаскивания ссылок. Для простых вещей.

Answer 8

Возможно, вы захотите взглянуть на элементы HTML5 canvas и один из плагинов jQuery, которые помогают с холстами, такими как метко названный canvas .

Answer 9

довольно просто сделать это с помощью некоторых CSS и JQuery для переключения классов как для изображения предварительного просмотра, так и для содержимого формы.

просто отображает все шаги мастера как скрытые div, а когда пользователь нажимает «продолжить», отображает следующий контейнер в строке и скрывает предыдущий

на каждом из шагов формы, когда пользователь щелкает элемент, просто добавьте класс к изображению предварительного просмотра или замените атрибут src изображения

Я бы сделал несколько изображений, размещенных одно над другим (абсолютное положение), как слои, и в зависимости от того, что пользователь делает на текущем шаге, обновляет соответствующий «слой»

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

Answer 10

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

Все, что вам нужно сделать, это адаптировать код, который вы найдете здесь:

1. http://plugins.jquery.com/project/SmartWizard для шагов мастера
2. http://www.sohtanaka.com/web-design/examples/image-rotator/ для миниатюр / изображений / текста, которые должны отображаться, когда пользователь делает выбор.

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

С уважением, A.