Come ingrandire e ingrandire l'immagine usando JavaScript?
JavaScript può essere utilizzato per manipolare la proprietà in stile di un elemento HTML per creare un effetto zoom-in e zoom-out. Per fare ciò, accedi semplicemente all'attributo di larghezza utilizzando la proprietà di stile e aumentarla o diminuirla in base al requisito. Per accedere a questa proprietà di stile di un elemento HTML, è necessario creare e memorizzare un riferimento all'elemento HTML all'interno di una variabile di JavaScript. Esaminiamo la procedura passo-passo per raggiungere il compito da svolgere.
Passaggio 1: impostare il documento HTML
Inizia creando un nuovo documento HTML con le seguenti righe al suo interno:
Nelle righe sopra:
- Prima viene creato un nuovo elemento di immagine con l'URL locale per un'immagine che verrà visualizzata sul documento HTML.
- L'elemento immagine ha l'ID impostato su "Pic" in modo che JavaScript possa fare riferimento.
- Dopodiché, crea un nuovo pulsante, "Ingrandire", con la proprietà OnClick che cercherà la funzione ingrandire() Nel file di script o nel tag script.
- Dopodiché, crea un nuovo pulsante, "Zoom-Out", che è stato creato con la proprietà OnClick che cercherà la funzione zoomout () Nel file di script o nel tag script.
L'esecuzione del documento HTML a questo punto produrrà la seguente uscita sul browser:
Passaggio 2: aggiunta di funzionalità usando JavaScript
Nel secondo passaggio, crea un tag di script nello stesso documento HTML o crea un nuovo file JavaScript e collegalo al documento HTML. Indipendentemente dal caso, la prima cosa in JavaScript è creare la funzione per il pulsante zoom-in con le seguenti righe di codice:
funzione zoomin ()
var pic = documento.getElementById ("foto");
var width = pic.ClientWidth;
foto.stile.larghezza = larghezza + 100 + "px";
Nel frammento di codice sopra:
- È stata creata la funzione zoomin () che verrà chiamata ogni volta che si fa clic sul pulsante zoom.
- All'interno della funzione, il primo passo è ottenere il riferimento dell'elemento immagine utilizzando il suo ID e archiviarlo all'interno della variabile "Pic".
- Successivamente, ottieni la larghezza corrente dell'elemento immagine utilizzando l'attributo della larghezza client.
- E quindi accedere alla proprietà di stile e all'attributo di larghezza all'interno della proprietà di stile e aumenta il suo valore aggiungendo alcuni pixel nella larghezza corrente dell'immagine.
Ciò imiterà un effetto zoom-in sull'immagine ogni volta che viene cliccato il pulsante zoom-in.
Successivamente, crea la funzione per il pulsante zoom-out utilizzando le seguenti righe:
funzione zoomout ()
var pic = documento.getElementById ("foto");
var width = pic.ClientWidth;
foto.stile.larghezza = larghezza - 100 + "px";
Nel frammento di codice sopra:
- È stata creata la funzione zoomout () che verrà chiamata ogni volta che si fa clic sul pulsante zoom-out.
- All'interno della funzione, il primo passo è ottenere il riferimento dell'elemento immagine utilizzando il suo ID e archiviarlo all'interno della variabile "Pic".
- Successivamente, ottieni la larghezza corrente dell'elemento immagine utilizzando l'attributo della larghezza client e memorizzalo all'interno del "larghezza" variabile.
- E quindi accedere alla proprietà di stile e dell'attributo di larghezza all'interno della proprietà di stile e diminui il suo valore rimuovendo alcuni pixel dalla larghezza corrente dell'elemento immagine.
Questo imiterà un effetto zoom-out sull'immagine ogni volta che viene premuto il pulsante zoom-out.
Passaggio 3: testare la funzionalità
L'ultimo passo per eseguire il documento HTML e osservare il funzionamento del documento HTML per essere:
Poiché è chiaro dalla gif sopra che lo zoom-in e il pulsante zoom-out funzionano perfettamente come previsto.
Incartare
È abbastanza facile imitare a ingrandire e a Zoom-out Effetto su un Immagine Elemento con l'aiuto di JavaScript. Dopo che il documento HTML è stato configurato, vai nel file JavaScript e accedi al larghezza Proprietà dell'immagine. E poi cambia il valore di questo larghezza Proprietà in base al pulsante che è stato premuto dall'utente.