Kako ustvariti povečevalno steklo na spletni strani

Avtor: Virginia Floyd
Datum Ustvarjanja: 14 Avgust 2021
Datum Posodobitve: 15 November 2024
Anonim
Сборка кухни за 30 минут своими руками. Переделка хрущевки от А до Я # 35
Video.: Сборка кухни за 30 минут своими руками. Переделка хрущевки от А до Я # 35

Vsebina

Dajanje obiskovalcem vaše spletne strani priložnost, da podrobno pogleda sliko, zahteva malo manipulacije s temi slikami. Če v kompozicijo dodate malo CSS, JavaScript in jQuery, lahko ustvarite učinek povečevalnega stekla, ko se kazalec miške premakne nad sliko na vaši strani. Ta učinek dosežete tako, da ustvarite majhno okno, ki prikaže sliko ozadja, ko se kazalec miške premakne nad sliko, prikazano v ospredju.


Navodila

Dajte obiskovalcem vaše spletne strani "blizu" slike (Znamka X Slike / Znamke X Slike / Getty Images)

  1. Vključite JavaScript in jQuery v razdelek »glava« HTML kode z navodili:

    V tem primeru se knjižnica jQuery nahaja v privzeti mapi HTML.

  2. Vstavite oznako CDATA, da preprečite poskus brskanja brskalnika jQuery:

  3. Nastavite spremenljivke višine in širine, ki se uporabljajo za prikaz slik:

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

  4. Nastavite pogoje za zagon funkcije povečave. Ko je klicana, ta funkcija nadomešča kazalec miške s krožnim pregledovalnikom največje prekrite slike, ko se uporabnik premakne nad manjšo sliko, prikazano na strani. Ustvarite ta primerek s kodo:

    $ (document) .ready (funkcija () {

    $ ("# myimage"). premik miške (funkcija (e) {$ (document) .mousemove (myMM); $ ("# glass"). fadeIn ('hitro');


    });

  5. Nastavite funkcijo povečave in parametre finalizacije. V tem primeru se skrita slika poveča za dvakratno velikost manjše slike in okno povečave izgine, ko se kazalec miške premakne izven meja manjše slike. To lahko storite s kodo:

    funkcija myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-image"); var glass = $ ("# glass"); var xs = e.pageX - myImage.offset (). levo; var ys = e.pageY - myImage.offset (). vrh; var bx = glassImage.width () / 2 - xsW / w; var z = glassImage.height () / 2 - ysH / h; glass.css ("levo", e.stranX-75-89 + "px"). css ("vrh", e.pageY-75-10 + "px"); glassImage.css ("položaj ozadja", bx + "px" + s + "px"); if (bx <-W || z <-H || bx> 150 || s> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ("hitro"); }}

  6. Zaprite "skript" jQuery in izbrišite razčlenjevalnik CDATA z navodili:


    // ]]>

  7. Nastavite postavitev strani s CSS-jem tako, da bo postavila večjo sliko v ozadju in okno povečave meji na kodo:

    type = "text / css"> #monaimage {margin-left: 200px; } # steklo {ozadje-ponavljanje: brez ponavljanja; položaj ozadja: zgoraj levo; širina: 250px; višina: 170px; padding-top: 10px; padding-left: 89px; margin: 0; položaj: absolutno; prikaz: nič; } # glass-image {background-image: url ('myImageLarge.jpg'); širina: 150px; višina: 150px; obmejni polmer: 75px; -moz-border-radius: 75px; ponovitev v ozadju: brez ponovitve; barva ozadja: #fff; margin: 0; oblazinjenje: 0; kazalec: noben; }

  8. Napišite kodo HTML za prikaz strani v razdelku "telo":

    >

    Premaknite miško nad sliko

Kako

  • Ta koda je odvisna od CSS3, da ustvari polje okrogle povečave in morda ne bo delovalo v starejših brskalnikih. Za združljivost s starejšimi izvedbami CSS nastavite pravokotno polje za "# glass-image" (povečevalno steklo).

Obvestilo

  • Brez oznak CDATA bodo brskalniki poskusili razčleniti operaterje, ki so manj kot "<" in večji od ">" kot oznake HTML. Vedno vključite operaterje JavaScript in jQuery z oznakami CDATA, da se izognete "skriptnim" napakam.