Jak vytvořit efekt zvětšovacího skla na webové stránce

Autor: Christy White
Datum Vytvoření: 9 Smět 2021
Datum Aktualizace: 15 Listopad 2024
Anonim
Jak vytvořit efekt zvětšovacího skla na webové stránce - Články
Jak vytvořit efekt zvětšovacího skla na webové stránce - Články

Obsah

Dávat návštěvníkům vašich stránek možnost podívat se na obraz podrobně vyžaduje trochu manipulace s těmito obrázky. Přidáním malého CSS, JavaScriptu a jQuery do kompozice můžete vytvořit efekt zvětšovacího skla, když se kurzor myši přesune na obrázek na vaší stránce. Tohoto efektu je dosaženo vytvořením malého okna, které zobrazuje obrázek pozadí, když se ukazatel myši pohybuje nad obrazem zobrazeným v popředí.


Pokyny

Dejte návštěvníkům vašich stránek "detailní" obraz (Obrázky značky X / Obrázky značky X / Getty Images)

  1. Zahrnout JavaScript a jQuery do sekce "head" HTML kódu s pokyny:

    V tomto příkladu je knihovna jQuery umístěna ve výchozím adresáři HTML.

  2. Vložte značku CDATA, abyste zabránili pokusům prohlížeče analyzovat operátory jQuery:

  3. Nastavte proměnné výšky a šířky použité k zobrazení obrázků:

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

  4. Nastavte podmínky, které spustí funkci zvětšení. Při volání tato funkce nahradí ukazatel myši kruhovým prohlížečem největšího zakrytého obrazu, když uživatel přejde nad menší obrázek zobrazený na stránce. Vytvořte tuto instanci s kódem:


    $ (document) .ready (function () {

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

    });

  5. Nastavte funkci zvětšení a parametry finalizace. V tomto příkladu je skrytý obraz zvětšen o dvojnásobek velikosti menšího obrazu a okno zvětšení zmizí, když se ukazatel myši pohybuje mimo hranice menšího obrázku. Můžete to provést pomocí kódu:

    funkce 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 ("vlevo", e.pageX-75-89 + "px") css ("top", e.pageY-75-10 + "px"); glassImage.css ("Pozice pozadí", bx + "px" + + "px"); if (bx <-W || by <-H || bx> 150 || by> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ('rychlý'); }}


  6. Zavřete skript "jQuery" a odstraňte analyzátor CDATA s pokyny:

    // ]]>

  7. Nastavte rozvržení stránky pomocí CSS tak, aby byl větší obrázek na pozadí a okraje zvětšovacího okna s kódem:

    type = "text / css"> #monaimage {margin-left: 200px; } #glass {background-repeat: no-repeat; Pozice na pozadí: vlevo nahoře; šířka: 250x; výška: 170px; polstrování: 10px; polstrování vlevo: 89px; marže: 0; pozice: absolutní; displej: žádný; } # glass-image {background-image: url ('myImageLarge.jpg'); šířka: 150px; výška: 150px; hraniční hrana: 75px; -moz-hraniční rádius: 75px; background-repeat: no-repeat; barva pozadí: #fff; marže: 0; výplň: 0; kurzor: žádný; }

  8. Chcete-li zobrazit stránku v části „tělo“, napište kód HTML:

    >

    Přesuňte myš nad obrázek

Jak

  • Tento kód závisí na CSS3, aby vytvořil kulaté pole zvětšení a nemusí fungovat ve starších prohlížečích. Pro zpětnou kompatibilitu se staršími implementacemi CSS nastavte obdélníkové pole pro "# glass-image" (zvětšovací sklo).

Oznámení

  • Bez tagů CDATA se prohlížeče pokoušejí analyzovat operátory menší než "<" a větší než ">" jako tagy HTML. Vždy se zapojte JavaScript a jQuery operátory s CDATA tagy, aby se zabránilo "skript" selhání.