javascript - tag - title w3school

¿Cómo simular una lupa en la imagen de una página web(Javascript)? (6)

Bueno, en primer lugar, para cualquier persona que quiera usar ese efecto, hay muchos complementos de jQuery. Aquí hay algunos:

En segundo lugar, es bastante fácil de lograr. Simplemente cargue la imagen a tamaño completo, pero dale un width más pequeño que el ancho real, de modo que CSS la escale. Luego, use JavaScript + CSS para crear una Div (la lupa) con la misma imagen que el fondo, pero cambie la propiedad de background-position a la correspondiente coordenada x,y que se encuentra actualmente el mouse del usuario.

Supongo que hay otras formas de hacerlo, y Google podría hacerlo de manera diferente, pero esta es la forma más obvia para mí que me viene a la mente.

Google tiene los mejores efectos: una vez que fue un juego de Pac-man, hoy parece ser el 160 aniversario de la primera Feria Mundial, y el logotipo de Google tiene una imagen de ello. También convierten el ratón en una lupa que puede barrer la imagen (el anillo de oro).

Me pregunto cómo lo hacen. Obviamente es Javascript, y miré la fuente de la página, pero no es especialmente legible (no es de extrañar).

Hay un ejemplo completo de ampliación de cualquier tipo de HTML, incluido HTML5 en http://www.aplweb.co.uk/blog/js/magnifying-glass/ . También funciona el navegador cruzado, aunque las esquinas redondeadas son un poco dudosas en la mayoría de los navegadores, por lo que tendrá que usar un cuadro en lugar de un círculo.

Aquí es cómo funciona:

Duplica el contenido que deseas ampliar.
Coloque el contenido duplicado en otro elemento y establezca el ancho / alto visible y el desbordamiento oculto
Use JavaScript para mover el contenido duplicado para que se mueva por la cantidad de zoom * movimiento del mouse. También mueva el div visible por el movimiento del ratón.

Eso es más o menos eso también. Hay muchas cosas pequeñas que tener en cuenta, aunque para que funcionen en todos los navegadores.

Mirando su código fuente, parece que están usando técnicas bastante básicas para lograrlo.

Ignorando todos los ingeniosos gifs incrustados, básicamente hay dos imágenes: grandes y pequeñas de toda la escena. La imagen más grande se repite tres veces en el documento. Mire la imagen anotada a continuación para tener una mejor idea de cómo funciona el zoom.

La parte dentro del círculo de aumento está dividida en tres div - superior, media e inferior. El desbordamiento para cada div debe estar oculto. Cada div se coloca relativamente dentro del círculo del zoom. En el movimiento del mouse, cambie la posición absoluta del círculo de zoom a las coordenadas del mouse. Su ejemplo también usa CSS3 para escalar y agregar algunos retrasos de animación.

Aquí hay un example reconstruido mínimo sorta.

Otro example donde no ocultamos el desbordamiento de div para revelar todo como un cuadrado.

No sé cómo lo hace Google, ya que el logotipo ya no se muestra en mi área; pero este efecto se puede lograr al recortar el GIF animado ampliado sobre la imagen normal utilizando un lienzo. Alternativamente, también es posible crear crear un recorte circular utilizando el radio de borde de CSS (comúnmente utilizado para implementar esquinas redondeadas).

EDITAR: He pirateado esto para mostrar la técnica básica que necesita si usó CSS border-radius: http://jsfiddle.net/yjBuS/

Parece que están usando dos imágenes, una para el logotipo y otra para el zoom (la imagen ampliada está cortada, ¿para ejecutar las animaciones por separado ...?) Probablemente detectan si el mouse está sobre el logotipo normal, luego muestran El círculo amarillo y adjuntarlo a la posición del ratón. Luego muestra la otra imagen, moviéndola en sentido opuesto al ratón. O algo similar.

Visite http://codeblab.com/glass/ para ver un ejemplo de la vida real y una explicación detallada de esta técnica. Flash y CSS v3 tienen una amplia funcionalidad para construir una lupa redonda. Sin embargo, simulate-a-circle-with-overlapping-rectangles funciona en (muchas) más plataformas.

(DIVULGACIÓN: codeblab.com es mi blog de pasatiempo personal con algunos enlaces débiles a mi trabajo en los Países Bajos).