Кому-нибудь нравится прокрутка в стиле Google Maps?
Я ищу какой-нибудь плагин JavaScript (желательно jQuery), чтобы иметь возможность прокручивать изображение так же, как работает Карты Гугл.
Я могу сделать изображение перетаскиваемым, но при перетаскивании я вижу все изображение, даже если родительский div - overflow:hidden.
Любая помощь будет принята с благодарностью!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Вы можете использовать API карт Google ... они позволяют использовать его с пользовательскими изображениями. И вы можете выбрать, отображаются ли элементы управления или нет.
Обновлено: нашел достойный учебник о том, как это сделать. http://mapki.com/wiki/Add_Your_Own_Custom_Map
Я знаю, что этот ответ был сделан 3 года назад. Однако я должен упомянуть, что Google собирается использовать платную модель для API Карт Google; поэтому, если вы используете свои собственные изображения, худшей альтернативой является Google Maps.
Ознакомьтесь с Инструмент для обрезки изображений Google Maps. Он может взять любое изображение или цифровую фотографию и разрезать его на плитки, которые отображаются на карте Google. Это может быть быстрый способ сделать то, что вам нужно ...
Это меньше связано с javascript и больше связано с Кодирование CSS.
Попробуйте поэкспериментировать только с HTML и CSS, чтобы изображение было правильно обрезано, а затем добавьте javascript, чтобы перемещать его.
Если у вас не получается закрепить его с помощью HTML или переместить с помощью javascript-сообщения, простейшая демонстрация проблемы здесь для отладки.
Без кода мы снимаем в темноте.
html и css, похоже, являются проблемой, когда не перетаскивание изображение обрезается в родительском div, но перетаскиваемый плагин (jquery.interface) затем снова делает все изображение доступным для просмотра
Хорошее описание базовой технологии можно найти в главе 4 (если я правильно помню) книги прагматичных программистов Прагматичный Аякс.
Вы увидите, как нарезка и нарезка изображений работают под обложками. И масштабирование.
орки под одеялом! Я всегда думал, что это эльфы внутри монитора перемещают изображения, когда вы перетаскиваете ...
Карты Google используют изображения, нарезанные на блоки, которые динамически загружаются, когда пользователь перемещается в разные стороны. Инструмент для обрезки изображений Google Maps, о котором упоминает Пол Диксон, - это инструмент, который вам нужен для этого.
Если вы просто хотите панорамировать одно большое изображение, а не иметь дополнительную сложность нарезки изображения на блоки, то вместо использования свойства переполнения CSS следует использовать свойство зажим. Это поддерживается во всех браузерах, о которых стоит задуматься, вплоть до IE4, если я правильно помню.
Одно замечание: спецификация CSS2.1 показывает примеры с прямыми значениями, разделенными запятыми. Однако это не поддерживается IE6 (возможно, и IE7). Однако все остальные браузеры понимают версию без запятых. Так что вместо
clip: rect(5px, 40px, 45px, 5px);
ты должен использовать
clip: rect(5px 40px 45px 5px);
для совместимости.
Вам нужен контейнер <div>, установленный в position: relative вокруг элемента <img>, который затем вы установите в position: absolute.
Таким образом, основной метод состоит в том, чтобы обновлять верхнее и левое значения по мере того, как пользователь перетаскивает, использовать их вместе с определенной шириной и высотой представления на изображении для создания соответствующей строки rect () и обновлять верхнюю, левую и клип свойства свойства style элемента <img>.
Не делайте того, что сделал я, и оставляйте «px» после значений в строке rect (). Мне потребовалось время, чтобы понять, почему это не работает :-)
Возможно, я немного опоздал на вечеринку, но я просто искал то же самое. Я наткнулся на scrollview для jquery, он отлично работает и выполняет именно эту функцию перетаскивания, похожую на карты Google, для переполненных div.
спасибо, это именно то, что мне нужно, запомнил на будущее
(Я очень опоздал на эту теперь мертвую вечеринку, но эй, я нашел эту страницу через поиск, так что ...)
Плагин Scrollview, предложенный mooware, у меня не работал.
Однако Перетаскиваемый сделал: http://plugins.jquery.com/project/Dragscrollable
хотя это принятый ответ, я надеялся на ответ jQuery, а не на еще один совершенно другой сценарий, который нужно включить.