Cómo crear un efecto de lente de aumento en un sitio

Contenido

• instrucciones
• consejos
• advertencia

Ofrecer a los visitantes de su página web la oportunidad de mirar detalladamente una imagen requiere un poco de manipulación de esas figuras. Agregar un poco de CSS, JavaScript y jQuery a la composición puede crear el efecto de una lupa, conforme el puntero del ratón se mueve sobre una imagen en su página. Este efecto se logra mediante la creación de una pequeña ventana que muestra la imagen de fondo cuando el puntero del ratón se mueve sobre la imagen que se muestra en primer plano.

instrucciones

Ofrezca a los visitantes de su página web un "primer plano" de la imagen (Brand X Pictures / Brand X Pictures / Getty Images)

1. Incluya JavaScript y jQuery en la sección "head" del código HTML con las instrucciones:

   En este ejemplo, la biblioteca jQuery se encuentra en el directorio HTML predeterminado.

2. Inserte una marca CDATA para impedir que los intentos del explorador de analizar los operadores de jQuery:

3. Defina las variables de altura y ancho utilizadas para mostrar las imágenes:

   var W = 743; var H = 1155; var w = 192; var h = 300;

4. Defina las condiciones que ponen en funcionamiento la función de ampliación. Cuando se llama, esta función reemplaza el puntero del ratón por una pantalla circular de la mayor imagen cubierta, cuando el usuario pasa el ratón sobre la imagen más pequeña, que se muestra en la página. Cree esta instancia con el código:

   
   

   $ (document) .ready (function () {

   () () () () () () () () () () () ().

   });

5. Ajuste la función de ampliación y los parámetros de finalización. En este ejemplo, la imagen oculta se agranda en dos veces el tamaño de la figura más pequeña y la ventana de ampliación desaparece cuando el puntero del ratón se mueve fuera de los límites de la imagen más pequeña. Usted puede hacer esto con el código:

   function myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-image"); var glass = $ ("# glass"); var xs = e.pageX - myImage.offset (). left; var ys = e.pageY - myImage.offset (). top; var bx = glassImage.width () / 2 - xsW / w; var by = glassImage.height () / 2 - ysH / H; glass.css ( "izquierda", e.pageX-75-89 + "px") css ( "top", e.pageY-75-10 + "px."); glassImage.css ("background-position", bx + "px" + by + "px"); (bx <-W || by <-H || bx> 150 || by> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ( 'rápido'); }}}

   
   

6. Cierre el "script" de jQuery y la eliminación del analizador CDATA con las instrucciones:

   // ]]>

7. Defina el diseño de página con CSS para colocar la imagen de fondo más grande y los límites de la ventana de ampliación con el código:

   type = "text / css"> #monaimage {margin-left: 200px; }}}} {background-repeat: no-repeat; background-position: top left; anchura: 250 píxeles; altura: 170px; padding-top: 10px; padding-left: 89px; margin: 0; position: absolute; display: none; }} # glass-image {background-image: url ('myImageLarge.jpg'); anchura: 150 píxeles; altura: 150 píxeles; border-radius: 75px; -moz-border-radius: 75px; background-repeat: no-repeat; background-color: #fff; margin: 0; padding: 0; cursor: ninguno; }

8. Escriba el código HTML para mostrar la página en la sección "body":

   >

   Mueve el ratón sobre la imagen

   

consejos

• Este código depende del CSS3 para crear un campo de ampliación redondo y no puede funcionar en los exploradores más antiguos. Para tener compatibilidad con versiones anteriores con implementaciones de CSS más antiguas, defina un campo rectangular para "# glass-image" (lupa).

advertencia

• Sin las marcas CDATA, los navegadores intentan analizar los operadores más pequeños que "<" y mayor que ">" como marcas HTML. Siempre involucra a los operadores JavaScript y jQuery con las marcas CDATA para evitar fallos de "script".