Я ищу некоторый плагин JavaScript (желательно jQuery), чтобы иметь возможность прокручивать изображение, так же, как Google Maps работает.
Я могу сделать изображение перетаскиваемым, но затем я вижу весь образ при перетаскивании, даже если родительский div overflow:hidden.
Любая помощь будет принята с благодарностью!
Возможно, я немного опоздал на вечеринку, но я просто искал то же самое. То, что я наткнулся на scrollview для jquery, отлично работает и делает именно эти карты google как перетаскивание в прокрутку для переполненных divs.
(Я слишком поздно опоздал на эту мертвую вечеринку, но, эй, я нашел эту страницу с помощью поиска, так что...)
Плагин Scrollview, предложенный mooware, не работал у меня.
Однако Dragscrollable сделал: http://plugins.jquery.com/project/Dragscrollable
Посмотрите Google Cart Image Cutter Он может принимать любое изображение или цифровую фотографию и вырезать ее в виде плиток, которые отображаются на карте Google, Возможно, это быстрый способ сделать то, что вам нужно...
Вы можете использовать карты google api... они позволяют использовать его с пользовательскими изображениями. И вы можете выбрать, появятся ли элементы управления или нет.
EDIT: нашел достойный учебник о том, как это сделать. http://mapki.com/wiki/Add_Your_Own_Custom_Map
Для хорошего описания базовой технологии смотрите главу 4 (если я правильно помню) книги Прагматичных программистов Pragmatic Ajax.
Вы увидите, как обрезка изображения и обработка накипи работают под обложками. И масштабирование.
Это меньше связано с javascript и больше связано с CSS-кодировкой.
Попробуйте несколько экспериментов с просто HTML и CSS, чтобы получить изображение для правильного клипа, а затем добавьте javascript для его перемещения.
Если вы не можете получить его для клипа с помощью HTML или переместить с сообщением javascript простейшую демонстрацию проблемы здесь для отладки.
Без кода, который мы снимаем в темноте.
В Картах Google используются изображения, нарезанные на блоки, которые динамически загружаются, когда пользователь работает в разных направлениях. Google Cutter изображений Google Пол Диксон упоминает инструмент, который вы хотите для этого.
Если вы просто хотите панорамировать одно крупное изображение, а не иметь дополнительную сложность разбиения изображения на блоки, вместо этого вместо использования свойства переполнения CSS вы должны использовать clip. Это поддерживается во всех браузерах, о которых стоит подумать, вплоть до IE4, если я правильно помню.
Обратите внимание: спецификация CSS2.1 показывает примеры с значениями rect, разделенными запятыми. Однако это не поддерживается IE6 (возможно, не IE7, либо). Однако все другие браузеры понимают версию без запятых. Поэтому вместо
clip: rect(5px, 40px, 45px, 5px);
вы должны использовать
clip: rect(5px 40px 45px 5px);
для совместимости.
Вам нужен контейнер <div> установленное в положение: относительно вокруг <img> элемент, который вы затем установите в положение: абсолютное.
Таким образом, основной способ состоит в том, чтобы обновить верхнее и левое значения при перетаскивании пользователя, использовать их вместе с определенной шириной и высотой представления на изображении, чтобы создать соответствующую строку rect(), и обновить верхнюю, левую, и свойства клипа <img> элемент style style.
Не выполняйте то, что я сделал, и оставьте "px" после значений в строке rect(). Мне потребовались годы, чтобы понять, почему он не работает: -)