Hvordan zoome inn og zoome ut bilde ved hjelp av JavaScript?

JavaScript kan brukes til å manipulere et HTML-elements stilegenskap for å skape en zoom-in- og zoom-ut-effekt. For å gjøre dette, bare tilgang til breddeattributtet ved hjelp av stilegenskapen og øke den eller redusere den i henhold til kravet. For å få tilgang til denne stilegenskapen til et HTML -element, må en referanse til HTML -elementet opprettes og lagres i en variabel av JavaScript. La oss gå over trinn-for-trinns prosedyre for å oppnå oppgaven for hånden.

Trinn 1: Sette opp HTML -dokumentet

Begynn med å lage et nytt HTML -dokument med følgende linjer inni det:

Zoom inn
Zoome ut

I linjene ovenfor:

• Først opprettes et nytt bildeelement med den lokale URL -en for et bilde som vises på HTML -dokumentet.
• Bildeelementet har ID -en satt til “Pic” slik at JavaScript kan referere til det.
• Etter det, opprett en ny knapp, "Zoom inn", med OnClick -egenskapen som vil søke etter funksjonen zoom inn() i skriptfilen eller i skriptetoden.
• Etter det, opprett en ny knapp, "Zoome ut", som er opprettet med OnClick -egenskapen som vil søke etter funksjonen zoome ut() i skriptfilen eller i skriptetoden.

Å kjøre HTML -dokumentet på dette tidspunktet vil gi følgende utdata på nettleseren:

Trinn 2: Legge til funksjonalitet ved hjelp av JavaScript

I det andre trinnet, opprette enten en skriptetag i samme HTML -dokument eller opprette en ny JavaScript -fil og koble den til HTML -dokumentet. Uansett tilfelle, er det første i JavaScript å opprette funksjonen for zoom-in-knappen med følgende kodelinjer:

funksjon zoomin ()
var pic = dokument.getElementById ("pic");
var bredde = bilde.klientbredde;
bilde.stil.bredde = bredde + 100 + "px";

I ovennevnte kodebit:

• Funksjon Zoomin () er opprettet som vil bli kalt hver gang zoom-in-knappen klikkes.
• Inne i funksjonen er det første trinnet å få referansen til bildeelementet ved å bruke ID -en og lagre det inne i variabelen “Pic”.
• Etter det, få gjeldende bredde på bildeelementet ved å bruke klientbreddeattributtet.
• Og får deretter tilgang til stilegenskapen og breddeattributtet i stilegenskapen og øke verdien ved å legge til noen piksler i gjeldende bredde på bildet.

Dette vil etterligne en zoom-in-effekt på bildet hver gang zoom-in-knappen er klikket.

Etter det, lag funksjonen for zoom-out-knappen ved å bruke følgende linjer:

funksjon zoomout ()
var pic = dokument.getElementById ("pic");
var bredde = bilde.klientbredde;
bilde.stil.bredde = bredde - 100 + "px";

I ovennevnte kodebit:

• Funksjon Zoomout () er opprettet som vil bli kalt hver gang zoom-out-knappen klikkes.
• Inne i funksjonen er det første trinnet å få referansen til bildeelementet ved å bruke ID -en og lagre det inne i variabelen “Pic”.
• Etter det, få gjeldende bredde på bildeelementet ved å bruke klientbreddeattributtet og lagre det inne i "bredde" variabel.
• Og få tilgang til stilegenskapen og breddeattributtet i stilegenskapen og redusere verdien ved å fjerne noen piksler fra gjeldende bredde på bildeelementet.

Dette vil etterligne en zoom-ut effekt på bildet hver gang zoom-out-knappen trykkes.

Trinn 3: Testing av funksjonaliteten

Det siste trinnet for å kjøre HTML -dokumentet og observere arbeidet med HTML -dokumentet for å være som:

Som det er klart fra GIF over at zoom-in og zoom-out-knappen fungerer perfekt som tiltenkt.

Pakk opp

Det er ganske enkelt å etterligne a zoom inn og a zoome ut effekt på en bilde element ved hjelp av JavaScript. Etter at HTML-dokumentet er satt opp, gå inn i JavaScript-filen og få tilgang til bredde Eiendom til bildet. Og endre verdien av det bredde Eiendom i henhold til knappen som er trykket av brukeren.