Hvordan lage en forstørrelsesglass effekt på et nettsted

Forfatter: Virginia Floyd
Opprettelsesdato: 7 August 2021
Oppdater Dato: 12 Kan 2024
Anonim
Hvordan lage en forstørrelsesglass effekt på et nettsted - Artikler
Hvordan lage en forstørrelsesglass effekt på et nettsted - Artikler

Innhold

Å gi besøkende til ditt nettsted muligheten til å se på et bilde i detalj krever litt manipulasjon av disse bildene. Når du legger til et lite CSS, JavaScript og jQuery til komposisjonen, kan du opprette effekten av et forstørrelsesglass som musepekeren beveger seg over et bilde på siden din. Denne effekten oppnås ved å lage et lite vindu som viser bakgrunnsbildet når musepekeren beveger seg over bildet som vises i forgrunnen.


retninger

Gi besøkende på nettstedet ditt en "nærbilde" av bildet (Brand X Pictures / Brand X Pictures / Getty Images)

  1. Inkluder JavaScript og jQuery i "head" delen av HTML-koden med instruksjonene:

    I dette eksemplet ligger jQuery-biblioteket i standard HTML-katalogen.

  2. Sett inn en CDATA-tag for å forhindre at nettleser forsøker å analysere jQuery-operatører:

  3. Angi høyde- og breddevariablene som brukes til å vise bildene:

    var W = 743; var H = 1155; var w = 192; var h = 300;

  4. Still inn betingelsene som starter forstørrelsesfunksjonen. Når den kalles, erstatter denne funksjonen musepekeren med en sirkulær visning av det største dekkbildet, når brukeren svinger over det mindre bildet som vises på siden. Opprett denne forekomsten med koden:


    $ (dokument) .ready (funksjon () {

    $ ("# myimage"). mouseover (funksjon (e) {$ (dokument) .mousemove (myMM); $ ("# glass"). fadeIn ('fast');

    });

  5. Still forstørrelsesfunksjonen og sluttparametrene. I dette eksemplet forstørres det skjulte bildet med to ganger størrelsen på det minste bildet, og forstørrelsesvinduet forsvinner når musepekeren beveger seg utenfor grensene til det mindre bildet. Du kan gjøre dette med koden:

    funksjon myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-bilde"); var glass = $ ("# glass"); var xs = e.pageX - myImage.offset (). venstre; var ys = e.pageY - myImage.offset (). topp; var bx = glassImage.width () / 2 - xsW / w; var ved = glassImage.height () / 2 - ysH / h; glass.css ("left", e.pageX-75-89 + "px"). css ("topp", e.pagey-75-10 + "px"); glassImage.css ("bakgrunnsposisjon", bx + "px" + ved + "px"); hvis (bx <-W || av <-H || bx> 150 || ved> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ('fast'); }}


  6. Lukk jQuery "script" og slett CDATA parseren med instruksjonene:

    // ]]>

  7. Sett sidelayout med CSS for å plassere det større bakgrunnsbildet og forstørrelsesvinduet grenser med koden:

    type = "text / css"> #monaimage {margin-left: 200px; } #glass {background-repeat: no-repeat; Bakgrunnsposisjon: øverst til venstre; bredde: 250px; høyde: 170px; polstring: 10px; polstring-venstre: 89px; margin: 0; posisjon: absolutt; skjerm: ingen; } # glass-bilde {bakgrunnsbilde: url ('myImageLarge.jpg'); bredde: 150px; høyde: 150px; border-radius: 75px; -moz-grense-radius: 75px; Bakgrunn-gjenta: nei-gjenta; bakgrunnsfarge: #fff; margin: 0; polstring: 0; markør: ingen; }

  8. Skriv HTML-koden for å vise siden i delen "kropp":

    >

    Flytt musen over bildet

tips

  • Denne koden er avhengig av CSS3 for å opprette et rundt forstørrelsesfelt og kan ikke fungere i eldre nettlesere. For bakoverkompatibilitet med eldre CSS-implementeringer, sett et rektangulært felt for "# glass-bilde" (forstørrelsesglass).

advarsel

  • Uten CDATA-kodene, prøver nettleserne å analysere operatører mindre enn «<" og større enn ">" som HTML-koder. Alltid involvere JavaScript og jQuery-operatører med CDATA-kodene for å unngå "script" -feil.