Карты Google используют изображения, нарезанные на блоки, которые динамически загружаются, когда пользователь перемещается в разных направлениях. Google Maps Image Cutter , о котором упоминает Пол Диксон, - инструмент, который вам нужен для этого.
Если вы просто хотите панорамировать одно большое изображение, а не иметь дополнительную сложность разрезания изображения на блоки, тогда вместо использования свойства переполнения CSS следует использовать свойство clip . Это поддерживается во всех браузерах, о которых стоит задуматься, вплоть до IE4, если я правильно помню.
Обратите внимание: спецификация CSS2.1 показывает примеры со значениями прямоугольника, разделенными запятыми. Однако это не поддерживается IE6 (возможно, не IE7, либо). Однако все остальные браузеры понимают версию без запятых. Так что вместо
clip: rect(5px, 40px, 45px, 5px);
вы должны использовать
clip: rect(5px 40px 45px 5px);
для совместимости.
Вам нужен контейнер
, установленный в положение: относительно элемента
, который вы затем установите в положение: абсолютный.
Таким образом, основной метод состоит в том, чтобы обновлять верхнее и левое значения при перетаскивании пользователем, использовать их вместе с определенной шириной и высотой представления на изображении, чтобы создать соответствующую строку rect (), и обновить верхнее, левое и обрезать свойства свойства стиля элемента .
Не делайте того, что я сделал, и пропустите «px» после значений в строке rect (). Мне понадобились годы, чтобы понять, почему это не сработало: -)