Sådan skabes en forstørrelsesglas effekt på en hjemmeside

Forfatter: Janice Evans
Oprettelsesdato: 3 Juli 2021
Opdateringsdato: 1 Juli 2024
Anonim
Sådan skabes en forstørrelsesglas effekt på en hjemmeside - Artikler
Sådan skabes en forstørrelsesglas effekt på en hjemmeside - Artikler

Indhold

At give besøgende til dit websted mulighed for at se et billede i detaljer kræver lidt manipulation af disse billeder. Tilføjelse af lidt CSS, JavaScript og jQuery til kompositionen kan du skabe effekten af ​​et forstørrelsesglas, da musemarkøren bevæger sig over et billede på din side. Denne effekt opnås ved at oprette et lille vindue, der viser baggrundsbilledet, når musemarkøren bevæger sig over det billede, der vises i forgrunden.


retninger

Giv besøgende på dit websted en "nærbillede" af billedet (Brand X Pictures / Brand X Pictures / Getty Images)

  1. Medtag JavaScript og jQuery i kapitlet "Hoved" i HTML-koden med vejledningen:

    I dette eksempel er jQuery-biblioteket placeret i standard HTML-mappen.

  2. Indsæt et CDATA-tag for at forhindre browsers forsøg på at analysere jQuery-operatører:

  3. Indstil højde- og breddevariablerne, der bruges til at vise billederne:

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

  4. Indstil de betingelser, der starter forstørrelsesfunktionen. Når den kaldes, erstatter denne funktion musemarkøren med en cirkulær seer af det største overdækkede billede, når brugeren svæver over det mindre billede, der vises på siden. Opret denne forekomst med koden:


    $ (dokument) .ready (funktion () {

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

    });

  5. Indstil forstørrelsesfunktionen og færdiggørelsesparametrene. I dette eksempel forstørres det skjulte billede med to gange størrelsen af ​​det mindre billede, og forstørrelsesvinduet forsvinder, når musemarkøren bevæger sig uden for grænserne for det mindre billede. Du kan gøre dette med koden:

    funktion myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-image"); var glas = $ ("# glas"); var xs = e.pageX - myImage.offset (). venstre; var ys = e.pageY - myImage.offset (). top; var bx = glassImage.width () / 2 - xsVægt / vægt var ved = glassImage.height () / 2 - ysH / h; glass.css ("left", e.pageX-75-89 + "px"). css ("top", e.pageY-75-10 + "px"); glassImage.css ("baggrundsposition", bx + "px" + ved + "px"); hvis (bx <-W || ved <-H || bx> 150 || af> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ('fast'); }}


  6. Luk jQuery "script" og slet CDATA parseren med instruktionerne:

    // ]]>

  7. Indstil sidelayout med CSS for at placere det større baggrundsbillede og forstørrelsesvinduet grænser med koden:

    type = "text / css"> #monaimage {margin-left: 200px; } #glass {background-repeat: no-repeat; baggrundsstilling: øverst til venstre; bredde: 250px; højde: 170px; polstring-top: 10px; polstring-venstre: 89px; margen: 0; position: absolut; display: none; } # glas-billede {baggrundsbillede: url ('myImageLarge.jpg'); bredde: 150px; højde: 150px; grænse-radius: 75px; -moz-grænse-radius: 75px; background-repeat: no-repeat; baggrundsfarve: #fff; margen: 0; polstring: 0; markør: ingen; }

  8. Skriv HTML-koden for at vise siden i afsnittet "krop":

    >

    Flyt musen over billedet

tips

  • Denne kode afhænger af CSS3 for at oprette et rundt forstørrelsesfelt og fungerer muligvis ikke i ældre browsere. For bagudkompatibilitet med ældre CSS implementeringer skal du indstille et rektangulært felt for "# glass-image" (forstørrelsesglas).

advarsel

  • Uden CDATA-tags prøver browsere at analysere operatører mindre end "<" og større end ">" som HTML-tags. Inddrag altid JavaScript og jQuery operatører med CDATA tags for at undgå "script" fejl.