¿Cómo puedo desplazar / acercar el contenido HTML? (es decir, Google Maps, WordSquared)

Busco desplazar / acercar el contenido HTML de una página, como Word ^ 2 (wordsquared.com) pero no puedo encontrar un complemento de jQuery o cualquier otra cosa para ayudar. ¿Estoy pasando por alto algo simple? Realmente no estoy seguro de por dónde empezar.

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

WordSquared.com utiliza la interfaz de usuario jQuery y se transmite en nuestro contenido cuando finaliza el arrastre si la vista necesita actualizarse.

Utilizamos los eventos de arrastrar y detener en ‘arrastrables’ para realizar estas comprobaciones y actualizar el contenido.

El zoom está implementado (o no) por los navegadores y simplemente funciona. Para obtener la implementación de google maps-ish necesitarías tener niveles de detalle de imagen y combinarlos. No puede capturar el evento de ‘zoom’ del navegador, pero puede obtener los eventos que activan el zoom del navegador (rueda del mouse, multitouch – buscar complementos de jQuery adicionales) y hacer el trabajo de zoom personalizado usted mismo.

Aunque a diferencia de Word ^ 2 y Google Maps, dependiendo de sus requisitos, este complemento que se acaba de lanzar para jQuery podría ser exactamente lo que está buscando:

Zoomooz.js

Puedes lograr el efecto de panorámica con algunos eventos y un poco de matemáticas.

Supongamos que tiene contenido en la página que es más ancho y más alto que la ventana. El navegador mostrará barras de desplazamiento para que el usuario pueda ver todo el contenido moviendo las barras de desplazamiento. Lo que puede hacer para lograr el efecto de panorámica es ocultar las barras de desplazamiento y adjuntar algunos eventos para que cuando el usuario arrastre en cualquier lugar sobre el documento, realmente mueva las barras de desplazamiento mediante progtwigción.

Aquí hay un ejemplo de jsfiddle (obviamente necesita mejoras): http://jsfiddle.net/jFQEW/4/

Puede ocultar las barras de desplazamiento colocando un overflow: hidden en su elemento de contenido, y puede mover las barras de desplazamiento con .scrollLeft y .scrollTop

Técnicamente estos no están siendo “ampliados”. Esas páginas tienen detectores de eventos Javascript que “escuchan” ciertos eventos, como el movimiento de la rueda de desplazamiento del mouse, que cuando se activan ejecutarán funciones que cambian dinámicamente los atributos del contenido de la página. Google Maps, por ejemplo, cambia las dimensiones de las imágenes, y luego, cuando se completa el efecto de “zoom”, reemplaza las imágenes con una resolución más alta.

Si establece anchos, alturas, relleno y margen en ems, entonces puede reducir y ampliar los elementos cambiando el tamaño de fuente del contenedor principal con los botones + / – y algunas funciones simples de JavaScript.

Para hacer zoom se puede utilizar:

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

o

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