Ako vytvoriť efekt zväčšovacieho skla na webovej stránke

Autor: Christy White
Dátum Stvorenia: 11 Smieť 2021
Dátum Aktualizácie: 2 V Júli 2024
Anonim
Ako vytvoriť efekt zväčšovacieho skla na webovej stránke - Články
Ako vytvoriť efekt zväčšovacieho skla na webovej stránke - Články

Obsah

Dať návštevníkom na vaše webové stránky možnosť pozrieť sa na obrázok v detaile vyžaduje trochu manipulácie s týmito obrázkami. Pridanie malého CSS, JavaScriptu a jQuery do kompozície môžete vytvoriť efekt lupy, keď sa kurzor myši pohybuje nad obrázkom na vašej stránke. Tento efekt sa dosahuje vytvorením malého okna, ktoré zobrazuje obrázok pozadia, keď sa kurzor myši pohybuje nad obrázkom zobrazeným v popredí.


inštrukcia

Dajte návštevníkom na vaše webové stránky "close-up" obrazu (Obrázky značky X / Obrázky značky X / Getty Images)

  1. Zahrňte JavaScript a jQuery do sekcie "head" HTML kódu s pokynmi:

    V tomto príklade je knižnica jQuery umiestnená v predvolenom adresári HTML.

  2. Vložte značku CDATA, aby ste zabránili pokusom prehliadača analyzovať operátorov jQuery:

  3. Nastavte premenné výšky a šírky použité na zobrazenie obrázkov:

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

  4. Nastavte podmienky, ktoré spustia funkciu zväčšenia. Keď je volaná, táto funkcia nahradí ukazovateľ myši kruhovým prehliadačom najväčšieho zakrytého obrazu, keď používateľ prejde nad menším obrázkom zobrazeným na stránke. Vytvorte túto inštanciu s kódom:


    $ (document) .ready (function () {

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

    });

  5. Nastavte funkciu zväčšenia a finalizačné parametre. V tomto príklade sa skrytý obrázok zväčší o dvojnásobok menšieho obrázka a okno zväčšenia zmizne, keď sa kurzor myši presunie mimo hranice menšieho obrázka. Môžete to urobiť s kódom:

    funkcia myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-image"); var glass = $ ("# sklo"); var xs = e.pageX - myImage.offset (). var ys = e.pageY - myImage.offset (). var bx = glassImage.width () / 2 - xsW / w; var by = glassImage.height () / 2 - ysH / h; glass.css ("left", e.pageX-75-89 + "px") css ("top", e.pageY-75-10 + "px"); glassImage.css ("pozícia pozadia", bx + "px" + + "px"); if (bx <-W || by <-H || bx> 150 || by> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ('rýchlo'); }}


  6. Zatvorte skript jQuery a odstráňte analyzátor CDATA s pokynmi:

    // ]]>

  7. Nastavte rozloženie stránky pomocou CSS tak, aby bol väčší obrázok na pozadí a okraje zväčšovacieho okna s kódom:

    type = "text / css"> #monaimage {margin-left: 200px; } #glass {background-repeat: no-repeat; poloha pozadia: vľavo hore; šírka: 250px; výška: 170px; polstrovanie: 10px; polstrovanie vľavo: 89px; marža: 0; pozícia: absolútna; zobrazenie: žiadne; } # glass-image {background-image: url ('myImageLarge.jpg'); šírka: 150px; výška: 150px; hraničný polomer: 75px; -moz-hraničný polomer: 75px; background-repeat: no-repeat; farba pozadia: #fff; marža: 0; vypchávka: 0; kurzor: žiadny; }

  8. Ak chcete zobraziť stránku v sekcii „telo“, napíšte kód HTML:

    >

    Presuňte myš nad obrázok

tipy

  • Tento kód závisí od CSS3, aby vytvoril okrúhle zväčšovacie pole a nemusí fungovať v starších prehliadačoch. Pre spätnú kompatibilitu so staršími implementáciami CSS nastavte obdĺžnikové pole pre "# glass-image" (zväčšovacie sklo).

varovanie

  • Bez značiek CDATA sa prehliadače pokúšajú analyzovať operátorov menej ako "<" a väčšie ako ">" ako značky HTML. Vždy zapojte JavaScript a jQuery operátorov s CDATA tagy, aby sa zabránilo "skript" zlyhania.