Vislumbre de la lupa de la imagen:
Una lupa de imagen es la capacidad de zoom de su punto de cursor. Donde colocó el cursor en el div definido, la imagen aparecerá en el modo de zoom. Al igual que en los sitios de compras, cuando desea comprar cualquier tipo de tela y desea verificar el material o imprimir en ese producto en detalle, esta función es útil. Para crear una lupa de imagen usaremos la función zoom(). Hay un artículo similar sobre cómo acercar y alejar la imagen usando JavaScript. que ampliará la imagen completa.
Vamos a construir una lupa de imágenes usando jQuery. A continuación se presentan algunos requisitos previos que esperamos que tenga algunos conocimientos básicos antes de comenzar a desarrollar esto:
- HTML
- CSS
- jQuery
- Oreja
Enfoque: obtenga las coordenadas de la página y la posición del mouse usando jQuery offset() para obtener la posición relativa del cursor con respecto al elemento. Establezca el atributo de visualización del contenedor exterior en block/inline-block para que la imagen nunca se desborde cada vez que se haga zoom. Establezca la posición superior/izquierda en relación con el contenedor siempre que se active el zoom. Tendremos que calibrar el zoom de la imagen, lo que lleva tiempo con respecto al contenedor en diferentes casos de uso. Por lo tanto, para lo mismo, vamos a utilizar un complemento de jQuery core simple llamado jQuery zoom que nos ahorra mucho tiempo haciendo lo mismo.
Creación de una estructura: en esta sección, crearemos una estructura básica. En primer lugar, haremos el diseño de la página.
- Código HTML para hacer la estructura:
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"/><!-- Required CDN's --><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><scriptsrc=</script></head><body><center><h1>GeeksforGeeks</h1></center><divclass="container-fluid"><b>Move your Cursor Over the Image</b><divclass="parent"><imgsrc=</div><spanclass="contain"><!-- Into another container --></span></div></body></html>
Estructura de diseño: en la sección anterior, hemos creado la estructura del diseño básico donde vamos a usar la lupa.
- Código de estructura CSS: en esta sección, diseñaremos el diseño y agregaremos la configuración CSS necesaria para hacer lo mismo. Las propiedades de estilo aplicadas en el contenedor garantizan que la imagen nunca se desborde fuera del contenedor nunca se desborde fuera de los límites especificados. Consulte los ejemplos a continuación para obtener más detalles.
<style>body {margin: 20px;}h1 {color: green;}.container {display: block;padding: 0px;}.contain {position: fixed;right: 15%;top: 15%;width: 200px;height: 220px;}img {width: 300px;height: 240px;}</style> - Agregar secuencia de comandos jQuery: ahora inicializaremos la secuencia de comandos jQuery. La sintaxis se destaca a continuación:
$([Selector to Parent element of Image]).zoom({Attributes}); $([Image]).parent().zoom({attributes});<script>$(document).ready(function() {$('.parent').css('width', $('img').width());$('img').parent().zoom({magnify: 4,target: $('.contain').get(0)});});</script>
Motivo para usar el elemento principal de la imagen como selector: según la documentación del repositorio de Git-hub, es difícil leer algunos diseños relacionados con los estilos CSS de JavaScript/jQuery, por lo que estamos usando el elemento principal aquí para hacer lo mismo y esto es actuando también como envoltorio de la imagen al mismo tiempo.
Atributos de la función zoom():
| Propiedad | Defecto | Descripción |
|---|---|---|
| en | ‘ratón sobre’ | Evento que se utilizará para activar el zoom. Opciones: mouseover, agarrar, hacer clic, alternar |
| duración | 120 | Velocidad para efectos de desvanecimiento. |
| objetivo | falso | Selector/elemento DOM que se usará como contenedor principal para la imagen ampliada. |
| tocar | verdadero | Habilita la interacción usando Touch. |
| aumentar | 1 | El valor ingresado se multiplica con la resolución de la imagen para hacer zoom. |
| llamar de vuelta | falso | Función llamada cuando la imagen se ha cargado. |
| onZoomIn | falso | Función invocada cuando la imagen se ha acercado. |
| onZoomOut | falso | Función llamada cuando la imagen se ha alejado. |
Combine el código HTML, CSS y jQuery: este es el código final después de combinar las secciones anteriores.
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <!-- Required CDN's --> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script> <style> body { margin: 20px; } h1 { color: green; } .container { display: block; padding: 0px; } .contain { position: fixed; right: 15%; top: 15%; width: 200px; height: 220px; } img { width: 300px; height: 240px; } </style></head> <body> <center> <h1>GeeksforGeeks</h1> </center> <div class="container-fluid"> <b>Move your Cursor Over the Image</b> <div class="parent"> <img src= </div> <span class="contain"> <!-- Into another container --> </span> </div> <script> $(document).ready(function() { $('.parent').css('width', $('img').width()); $('img') .parent() .zoom({ magnify: 4, target: $('.contain').get(0) }); }); </script></body> </html> |
Producción:
Publicación traducida automáticamente
Artículo escrito por devproductify y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA