Как создать перетаскиваемую страницу (карту) для большого изображения с помощью JQuery?

Question

Я хотел бы воссоздать страницу, например, такую: http://irrland.sonntagskunst.de , но в jQuery .Существуют ли плагины jQuery, которые делают это?(Ссылка выше написана с использованием прототипа).

Спасибо.

Answer 1

Я парень, который сделал карту IRRLAND. Это действительно написано с использованием Prototype. Я сделал похожий проект пару недель назад; на самом деле он основан на движке карт IRRLAND, но полностью переписан с использованием jQuery. Возможно, вы захотите взглянуть на него и попытаться восстановить его самостоятельно.

http://www.rocknrollmetromap.com/

Cheers, Patrick

Answer 2

На странице в вашем примере есть несколько действительно хороших анимаций.Возможно, вам придется добавить эти «хорошие» эффекты самостоятельно, но есть несколько плагинов jQuery, которые вы можете попробовать:

1. https://github.com/can3p/iviewer/wiki/
2. http://wayfarerweb.com/jquery/plugins/mapbox/

ОБНОВЛЕНИЕ:

Также проверьте это:

1. http://www.gethifi.com/blog/jquery-vs-flash-for-interactive-map
2. http://speckyboy.com/2010/02/03/10-jquery-plugins-for-easier-google-map-installation/
3. http://www.ajaxupdates.com/mapbox-zoomable-jquery-map-plugin/

Надеюсь, это поможет.

Answer 3

Используя jQuery scrollTo и некоторые хитрости css (возможно, переполнение: скрыто), это должно сработать: http://demos.flesler.com/jquery/scrollTo/

Answer 4

Это не должно быть очень сложно реализовать с помощью jQueryUI Draggable . Перетаскиваемый объект должен находиться внутри контейнера (высота: 100%, высота: 100%, переполнение: скрыто). Draggable имеет различные параметры и события. Например, на stop вы должны проверить, находится ли перетаскиваемый объект от краев контейнера, и сдвинуть его обратно к ним.