Cómo hacer una imagen de zoom y zoom-out usando JavaScript?
JavaScript se puede usar para manipular la propiedad de estilo de un elemento HTML para crear un efecto de zoom y zoom-out. Para hacer esto, simplemente acceda al atributo de ancho utilizando la propiedad de estilo y aumentarla o disminuirla de acuerdo con el requisito. Para acceder a esta propiedad de estilo de un elemento HTML, se debe crear y almacenar una referencia al elemento HTML dentro de una variable de JavaScript. Revisemos el procedimiento paso a paso para lograr la tarea en cuestión.
Paso 1: Configuración del documento HTML
Comience creando un nuevo documento HTML con las siguientes líneas dentro de él:
En las líneas anteriores:
- Primero se está creando un nuevo elemento de imagen con la URL local para una imagen que se mostrará en el documento HTML.
- El elemento de imagen tiene la identificación configurada en "Foto" para que JavaScript pueda hacer referencia a él.
- Después de eso, cree un nuevo botón, "Acercarse", con la propiedad OnClick que buscará la función acercarse() en el archivo de script o en la etiqueta de script.
- Después de eso, cree un nuevo botón, "Disminuir el zoom", que se ha creado con la propiedad OnClick que buscará la función disminuir el zoom() en el archivo de script o en la etiqueta de script.
Ejecutar el documento HTML en este punto producirá la siguiente salida en el navegador:
Paso 2: Agregar funcionalidad usando JavaScript
En el segundo paso, cree una etiqueta de script en el mismo documento HTML o cree un nuevo archivo de JavaScript y enléelo al documento HTML. No importa el caso, lo primero en JavaScript es crear la función para el botón zoom-in con las siguientes líneas de código:
función zoomin ()
var pic = documento.getElementById ("Pic");
ancho de var = foto.ClientWidth;
Foto.estilo.ancho = ancho + 100 + "px";
En el fragmento de código anterior:
- Se ha creado funciones zoomin () que se llamará cada vez que se haga clic en el botón zoom-in.
- Dentro de la función, el primer paso es obtener la referencia del elemento de imagen usando su ID y almacenarlo dentro de la variable "Foto".
- Después de eso, obtenga el ancho actual del elemento de imagen utilizando el atributo ClientWidth.
- Y luego acceda a la propiedad de estilo y al atributo de ancho dentro de la propiedad de estilo y aumente su valor agregando algunos píxeles en el ancho actual de la imagen.
Esto imitará un efecto de zoom en la imagen cada vez que se haga clic en el botón zoom-in.
Después de eso, cree la función para el botón Zoom-Out usando las siguientes líneas:
function zooMout ()
var pic = documento.getElementById ("Pic");
ancho de var = foto.ClientWidth;
Foto.estilo.ancho = ancho - 100 + "px";
En el fragmento de código anterior:
- Se ha creado funciones zoomout () que se llamará cada vez que se haga clic en el botón Zoom-Out.
- Dentro de la función, el primer paso es obtener la referencia del elemento de imagen usando su ID y almacenarlo dentro de la variable "Foto".
- Después de eso, obtenga el ancho actual del elemento de la imagen utilizando el atributo ClientWidth y guárdelo dentro del "ancho" variable.
- Y luego acceda a la propiedad de estilo y al atributo de ancho dentro de la propiedad de estilo y disminuye su valor eliminando algunos píxeles del ancho actual del elemento de imagen.
Esto imitará un efecto de zoom en la imagen cada vez que se presione el botón de zoom fuera.
Paso 3: Probar la funcionalidad
El último paso para ejecutar el documento HTML y observar el funcionamiento del documento HTML para que sea:
Como está claro en el GIF anterior, el botón Zoom-In y el zoom-Out funcionan perfectamente según lo previsto.
Envolver
Es bastante fácil imitar un acercarse y un disminuir el zoom efecto en un imagen Elemento con la ayuda de JavaScript. Después de que todo el documento HTML esté configurado, ingrese al archivo JavaScript y acceda a la ancho Propiedad de la imagen. Y luego cambiar el valor de eso ancho propiedad de acuerdo con el botón que ha sido presionado por el usuario.