Come posso eseguire il pan / zoom dei contenuti HTML? (es. Google Maps, WordSquared)

Sto cercando di ingrandire / ingrandire il contenuto HTML su una pagina, proprio come Word ^ 2 (wordsquared.com) ma non riesco a trovare un plugin jQuery o altro per aiutarti. Sto trascurando qualcosa di semplice? Non sono davvero sicuro da dove cominciare.

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

WordSquared.com utilizza l’interfaccia utente di jQuery e i flussi nel nostro contenuto quando il trascinamento termina se la vista deve essere aggiornata.

Utilizziamo gli eventi drag and stop in “trascinabili” per eseguire questi controlli e aggiornare il contenuto.

Lo zoom è effettivamente implementato (o meno) dai browser e kinda funziona solo. Per ottenere l’implementazione di google maps-ish, è necessario disporre di livelli di dettaglio dell’immagine e combinare tra loro. Non puoi prendere l’evento “zoom” del browser, ma puoi ottenere gli eventi che triggersno lo zoom del browser (rotellina del mouse, multitouch, ricerca di ulteriori plugin jquery) e fare lo zoom personalizzato da solo.

A differenza di Word ^ 2 e Google Maps, a seconda delle tue esigenze questo plugin appena rilasciato per jQuery potrebbe essere esattamente quello che stai cercando:

Zoomooz.js

È ansible ottenere l’effetto panning con alcuni eventi e un po ‘di matematica.

Supponiamo che tu abbia dei contenuti sulla pagina più ampia e più alta della finestra. Il browser mostrerà le barre di scorrimento in modo che l’utente possa vedere tutto il contenuto spostando le barre di scorrimento. Quello che puoi fare per rendere l’effetto panning è quello di hide le barre di scorrimento e albind alcuni eventi in modo che quando l’utente si sposta ovunque sul documento, si spostano effettivamente le barre di scorrimento.

Ecco un esempio di jsfiddle (ovviamente ha bisogno di miglioramenti): http://jsfiddle.net/jFQEW/4/

Puoi hide le barre di scorrimento mettendo un overflow: hidden sul tuo elemento di contenuto, e puoi spostare le scrollbar con .scrollLeft e .scrollTop

Tecnicamente questi non vengono “ingranditi”. Queste pagine hanno ascoltatori di eventi Javascript che “ascoltano” determinati eventi come il movimento della rotella del mouse che, una volta triggersto, eseguirà funzioni che modificano in modo dinamico gli attributi del contenuto della pagina. Le mappe di Google, ad esempio, modificano le dimensioni delle immagini e, quando l’effetto “zoom” è completo, sostituisce le immagini con una risoluzione più alta.

Se si impostano larghezze, altezze, padding e margini in ems, è ansible ridurre e ingrandire gli elementi modificando le dimensioni del carattere del contenitore principale con i pulsanti + / – e alcune semplici funzionalità JavaScript.

Per lo zoom puoi usare:

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

o

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