Как я могу перемещать / увеличивать содержимое HTML? (т.е. Google Maps, WordSquared)

Question

Я ищу панорамирование / масштабирование содержимого HTML на странице, очень похоже на Word ^ 2 (wordsquared.com), но я не могу найти плагин jQuery или что-нибудь еще, чтобы помочь.Я пропускаю что-то простое?Я действительно не уверен, с чего начать.

Answer 1

Хотя в отличие от Word ^ 2 и Google Maps, в зависимости от ваших требований этот плагин, только что выпущенный для jQuery, может быть именно тем, что вы ищете:

Zoomooz.js

Answer 2

Вы можете добиться эффекта панорамирования с некоторыми событиями и небольшой математикой.

Предположим, у вас есть содержимое на странице, которая шире и выше, чем окно.Браузер покажет полосы прокрутки, чтобы пользователь мог видеть весь контент, перемещая полосы прокрутки.Чтобы создать эффект панорамирования, вы можете скрыть полосы прокрутки и прикрепить некоторые события, чтобы, когда пользователь перетаскивал указатель мыши в любом месте документа, вы фактически программно перемещали полосы прокрутки.улучшения): http://jsfiddle.net/jFQEW/4/

Вы можете скрыть полосы прокрутки, поместив overflow: hidden на свой элемент контента, и вы можете перемещать полосы прокрутки с помощью .scrollLeft и .scrollTop

Answer 3

Технически это не "масштабирование".На этих страницах есть прослушиватели событий Javascript, которые «прослушивают» определенные события, такие как движение колеса прокрутки мыши, которые при запуске будут выполнять функции, которые динамически изменяют атрибуты содержимого на странице.Например, Google maps изменяет размеры изображений, а затем, когда эффект «увеличения» завершается, заменяет изображения с более высоким разрешением.

Answer 4

Если вы задаете ширину, высоту, отступы и поля в ems, вы можете уменьшить или увеличить элементы, изменив размер шрифта родительского контейнера с помощью кнопок + / - и некоторых простых функций JavaScript.

Answer 5

Для увеличения можно использовать:

$("#drawing").css("-webkit-transform","scale(0.75)");   // chrome

или

$("#drawing").css("zoom",75%); // CSS3

Answer 6

http://jqueryui.com/demos/draggable/

WordSquared.com использует пользовательский интерфейс jQuery и потоки в нашем контенте, когда перетаскивание заканчивается, если необходимо обновить представление.

Мы используем события перетаскивания и остановки в «перетаскиваемом» для выполнения этих проверок и обновления содержимого.

Масштабирование на самом деле реализовано (или нет) браузерами, и вроде как работает. Чтобы получить реализацию google maps-ish, вам нужно иметь уровни детализации изображения и смешивать их. Вы не можете перехватить событие браузера «zoom», но вы можете получить события, которые запускают масштабирование браузера (mousewheel, multitouch - поиск дополнительных плагинов jquery) и выполнить пользовательское масштабирование самостоятельно.