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:
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.