Comment zoomer et zoomer l'image à l'aide de JavaScript?

JavaScript peut être utilisé pour manipuler la propriété de style d'un élément HTML pour créer un effet de zoom-in et de zoom-out. Pour ce faire, accédez simplement à l'attribut de largeur à l'aide de la propriété de style et augmentez-le ou diminuez-le en fonction de l'exigence. Pour accéder à cette propriété de style d'un élément HTML, une référence à l'élément HTML doit être créée et stockée à l'intérieur d'une variable de JavaScript. Passons en revue la procédure étape par étape pour atteindre la tâche à accomplir.

Étape 1: Configuration du document HTML

Commencez par créer un nouveau document HTML avec les lignes suivantes à l'intérieur:

Agrandir
Dézoomer

Dans les lignes ci-dessus:

• Un nouvel élément d'image est d'abord créé avec l'URL locale pour une image qui sera affichée sur le document HTML.
• L'élément d'image a le jeu d'identité sur "Pic" afin que JavaScript puisse le référencer.
• Après cela, créez un nouveau bouton, "Agrandir", avec la propriété onClick qui recherchera la fonction agrandir() Dans le fichier de script ou dans la balise de script.
• Après cela, créez un nouveau bouton, "Dézoomer", qui a été créé avec la propriété onClick qui recherchera la fonction Dézoomer() Dans le fichier de script ou dans la balise de script.

L'exécution du document HTML à ce stade produira la sortie suivante sur le navigateur:

Étape 2: Ajout de fonctionnalités à l'aide de JavaScript

Dans la deuxième étape, créez une balise de script dans le même document HTML ou créez un nouveau fichier JavaScript et liez-le au document HTML. Peu importe le cas, la première chose en JavaScript est de créer la fonction du bouton Zoom-in avec les lignes de code suivantes:

fonction zooMin ()
var pic = document.getElementById ("pic");
var largeur = pic.ClientWidth;
pic.style.largeur = largeur + 100 + "px";

Dans l'extrait de code ci-dessus:

• Fonction zoomin () a été créé qui sera appelé chaque fois que le bouton zoom-in est cliqué.
• À l'intérieur de la fonction, la première étape consiste à obtenir la référence de l'élément d'image en utilisant son ID et le stocker à l'intérieur de la variable "Pic".
• Après cela, obtenez la largeur actuelle de l'élément d'image en utilisant l'attribut ClientWidth.
• Puis accéder à la propriété de style et à l'attribut de largeur dans la propriété de style et augmentez sa valeur en ajoutant des pixels dans la largeur actuelle de l'image.

Cela imitera un effet de zoom sur l'image chaque fois que le bouton zoom-in est cliqué.

Après cela, créez la fonction du bouton Zoom-Out à l'aide des lignes suivantes:

fonction zoomout ()
var pic = document.getElementById ("pic");
var largeur = pic.ClientWidth;
pic.style.largeur = largeur - 100 + "px";

Dans l'extrait de code ci-dessus:

• Function Zoomout () a été créée qui sera appelée chaque fois que le bouton Zoom-Out est cliqué.
• À l'intérieur de la fonction, la première étape consiste à obtenir la référence de l'élément d'image en utilisant son ID et le stocker à l'intérieur de la variable "Pic".
• Après cela, obtenez la largeur actuelle de l'élément d'image en utilisant l'attribut ClientWidth et stockez-le à l'intérieur du "largeur" variable.
• Puis accéder à la propriété de style et à l'attribut de largeur dans la propriété de style et à la diminution de sa valeur en supprimant certains pixels de la largeur actuelle de l'élément d'image.

Cela imitera un effet de zoom-out sur l'image à chaque fois que le bouton Zoom-Out est enfoncé.

Étape 3: Tester la fonctionnalité

La dernière étape pour exécuter le document HTML et observer le fonctionnement du document HTML comme:

Car il est clair du gif ci-dessus que le zoom-in et le bouton zoom-out fonctionnent parfaitement comme prévu.

Conclure

Il est assez facile d'imiter un agrandir et un Dézoomer effet sur un image élément avec l'aide de JavaScript. Une fois le document HTML largeur propriété de l'image. Puis modifie la valeur de cela largeur propriété en fonction du bouton qui a été appuyé par l'utilisateur.