Kuidas luua suurendusklaasi efekti veebilehel

Autor: Virginia Floyd
Loomise Kuupäev: 6 August 2021
Värskenduse Kuupäev: 13 Detsember 2024
Anonim
Calling All Cars: The Blood-Stained Coin / The Phantom Radio / Rhythm of the Wheels
Videot: Calling All Cars: The Blood-Stained Coin / The Phantom Radio / Rhythm of the Wheels

Sisu

Veebisaidi külastajatele võimaluse andmine pilti üksikasjalikult vaadelda nõuab nende piltide vähest manipuleerimist. Väikese CSS, JavaScript ja jQuery lisamine kompositsioonile võib luua suurendusklaasi efekti, kui hiirekursor liigub teie lehel pildi üle. See efekt saavutatakse väikese akna loomisega, mis kuvab taustapildi, kui hiirekursor liigub esiplaanil kuvatava pildi üle.


Juhised

Andke oma veebisaidi külastajatele pildi "lähivõte" (Bränd X Pildid / Bränd X Pildid / Getty Images)

  1. Lisage JavaScripti ja jQuery HTML-koodi jaotisse "head" koos juhistega:

    Selles näites asub jQuery raamatukogu HTML-kataloogi vaikimisi.

  2. Sisestage CDATA-silt, et vältida brauseri proovimist jQuery-operaatoreid analüüsida:

  3. Määrake piltide kuvamiseks kasutatavad kõrguse ja laiuse muutujad:

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

  4. Määrake suurenduse funktsiooni käivitavad tingimused. Helistamisel asendab see funktsioon hiirekursori suurima kaetud pildi ümmarguse vaatajaga, kui kasutaja liigub leheküljel näidatud väiksema pildi peale. Looge see eksemplar koodiga:


    $ (dokument). jau (funktsioon () {

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

    });

  5. Seadistage suurenduse funktsioon ja lõpetamisparameetrid. Selles näites suurendatakse peidetud kujutist väiksema pildi suurusega kaks korda ja suurendusaken kaob, kui hiirekursor liigub väiksema pildi piiridest välja. Seda saab teha koodiga:

    funktsioon myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-image"); var glass = $ ("# klaas"); var xs = e.pageX - myImage.offset () vasakule; var ys = e.pageY - myImage.offset (). var bx = glassImage.width () / 2 - xsW / w; var by = glassImage.height () / 2 - ysH / h; glass.css ("vasak", e.pageX-75-89 + "px"). css ("top", e.pageY-75-10 + "px"); glassImage.css ("taustapositsioon", bx + "px" + + + "px"); kui (bx <-W || by <-H || bx> 150 || by> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ('kiire'); }}


  6. Sulgege jQuery "skript" ja kustutage CDATA parser koos juhistega:

    // ]]>

  7. Määrake lehekülje paigutus CSS-iga, et asetada suurem taustapilt ja suurendusaken piirata koodiga:

    type = "text / css"> #monaimage {margin-left: 200px; } #glass {taust-kordus: ei kordust; taustasend: üleval vasakul; laius: 250 px; kõrgus: 170px; polster-top: 10px; padding-left: 89px; varu: 0; positsioon: absoluutne; kuva: pole; } # glass-image {background-image: url ('myImageLarge.jpg'); laius: 150 px; kõrgus: 150 px; raadius: 75x; -moz-border-raadius: 75 px; taustaproov: korduv; taustavärv: #fff; varu: 0; polster: 0; kursor: pole; }

  8. Kirjutage HTML-kood, et kuvada lehel "keha":

    >

    Liiguta hiirt pildi peale

Kuidas

  • See kood sõltub CSS3-st, et luua ümmargune suurenduse väli ja see ei pruugi töötada vanemates brauserites. Tagasiühendamiseks vanemate CSS-rakendustega seadke "# glass-image" (suurendusklaas) jaoks ristkülikukujuline väli.

Teade

  • Ilma CDATA-märgendita proovivad brauserid HTML-märgenditena operaatorit vähem kui <> ja rohkem kui ">". Kaasake alati JavaScript ja jQuery operaatorid CDATA sildiga, et vältida skripti tõrkeid.