Google Maps estilo de desplazamiento a nadie?

Question

Estoy buscando un poco de JavaScript plugin (preferiblemente jQuery) para ser capaz de desplazarse a través de una imagen, de la misma manera que Google Maps obras.

Puedo hacer que la imagen se pueden arrastrar, pero luego veo la imagen entera mientras se arrastra incluso si el div padre es overflow:hidden.

Cualquier ayuda sería muy apreciada!

Answer 1

Yo puede que sea un poco tarde a la fiesta, pero yo estaba buscando la misma cosa.Lo que me tropecé es scrollview para jquery, funciona perfecto y es exactamente esto de los mapas de google-como arrastrar para desplazarse por desbordó divs.

Answer 2

(Estoy super tarde a esto ahora muerto del partido, pero bueno, he encontrado esta página a través de una búsqueda, etc...)

Scrollview plugin sugerido por mooware no funciona para mí.

Sin embargo Dragscrollable hizo:http://plugins.jquery.com/project/Dragscrollable

Pruebe la demostración

Answer 3

Retirar el Google Maps Imagen Cortador Se puede tomar en cualquier imagen o fotografía digital y corte en las fichas que se muestran en un Mapa de Google.Podría ser una forma rápida de hacer lo que usted necesita...

Answer 4

Usted podría utilizar la api de google maps...que permiten utilizarlo con imágenes personalizadas.Y usted puede elegir si los controles se muestran o no.

EDITAR:Encontrar un tutorial decente sobre cómo hacer esto.http://mapki.com/wiki/Add_Your_Own_Custom_Map

Answer 5

Para una buena descripción de la tecnología subyacente tener una mirada en el Capítulo 4 (si no recuerdo mal) de la Pragmática de los Programadores de libro Pragmática Ajax.

Verás cómo la imagen rebanar y picar las obras de debajo de las mantas.Y el zoom.

Answer 6

Esto tiene menos que ver con javascript y más con el CSS.

Pruebe con un par de experimentos con solo HTML y CSS para obtener la imagen en el clip correctamente, a continuación, añadir el javascript para moverse.

Si usted no puede conseguir que el clip con HTML, o se mueven con el javascript post el más simple demostración de que el problema aquí para ayudarnos a depurar.

Sin el código vamos a disparar en la oscuridad.

Answer 7

Google Maps utiliza imágenes en rodajas en bloques que se cargan dinámicamente como el usuario se desplaza en diferentes direcciones.El Google Maps Imagen Cortador Paul Dixon menciona es la herramienta que usted necesita para este.

Si usted sólo quiere pan una imagen de gran tamaño, en lugar de tener la complejidad adicional de dividir la imagen en bloques, en vez de usar el CSS de desbordamiento de la propiedad, usted debe utilizar el clip de la propiedad.Esto es compatible con todos los navegadores que vale la pena pensar, hasta IE4 si recuerdo correctamente.

Un punto a tener en cuenta:el CSS2.1 spec muestra ejemplos con el rect valores separados por comas.Sin embargo, esto no es compatible con IE6 (tal vez no IE7, tampoco).Sin embargo, todos los otros navegadores entender la versión sin comas.Así que en lugar de

clip: rect(5px, 40px, 45px, 5px);

usted debe utilizar

clip: rect(5px 40px 45px 5px);

para la compatibilidad.

Usted necesita un contenedor <div> configurar la posición relativa de todo el <img> elemento, que, a continuación, configurar la posición de:absoluta.

Así que la técnica básica es la actualización de la parte superior y a la izquierda los valores como el usuario arrastra, el uso de estos junto con la define la anchura y la altura de la vista en la imagen para crear la apropiada rect() string, y la actualización de la parte superior, a la izquierda, y el clip de propiedades del <img> elemento del estilo de la propiedad.

No hagas lo que yo hice y salir de la "px" después de los valores en el rect() de la cadena.Me tomó las edades para darse cuenta de por qué no estaba funcionando :-)