Hoe een vergrootglaseffect op een website te creëren

Schrijver: Janice Evans
Datum Van Creatie: 3 Juli- 2021
Updatedatum: 12 Kunnen 2024
Anonim
Hoe een vergrootglaseffect op een website te creëren - Artikelen
Hoe een vergrootglaseffect op een website te creëren - Artikelen

Inhoud

Om bezoekers van uw website de gelegenheid te geven om in detail naar een afbeelding te kijken, is een beetje manipulatie van deze afbeeldingen nodig. Door een beetje CSS, JavaScript en jQuery aan de compositie toe te voegen, kunt u het effect van een vergrootglas creëren wanneer de muisaanwijzer over een afbeelding op uw pagina beweegt. Dit effect wordt bereikt door een klein venster te maken dat de achtergrondafbeelding weergeeft wanneer de muisaanwijzer over de afbeelding op de voorgrond beweegt.


routebeschrijving

Geef bezoekers van uw website een "close-up" van de afbeelding (Brand X Pictures / Brand X Pictures / Getty Images)

  1. Neem JavaScript en jQuery op in het gedeelte "head" van de HTML-code met de instructies:

    In dit voorbeeld bevindt de jQuery-bibliotheek zich in de standaard HTML-map.

  2. Voeg een CDATA-tag in om te voorkomen dat browserpogingen jQuery-operators ontleden:

  3. Stel de hoogte- en breedtevariabelen in die worden gebruikt om de afbeeldingen weer te geven:

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

  4. Stel de voorwaarden in die de vergrotingsfunctie starten. Wanneer deze functie wordt aangeroepen, vervangt deze functie de muisaanwijzer door een cirkelvormige viewer van het grootste afgedekte beeld, wanneer de gebruiker zweeft over het kleinere beeld dat op de pagina wordt getoond. Maak deze instantie met de code:


    $ (document) .ready (function () {

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

    });

  5. Stel de vergrotingsfunctie en de finalisatieparameters in. In dit voorbeeld wordt de verborgen afbeelding vergroot met tweemaal de grootte van de kleinere afbeelding en verdwijnt het vergrotingsvenster wanneer de muisaanwijzer buiten de grenzen van de kleinere afbeelding komt. U kunt dit doen met de code:

    function myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-image"); var glas = $ ("# glas"); var xs = e.pageX - myImage.offset (). left; var ys = e.pageY - myImage.offset (). top; 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 ("achtergrondpositie", bx + "px" + door + "px"); if (bx <-W || door <-H || bx> 150 || by> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ('snel'); }}


  6. Sluit het jQuery "-script" en verwijder de CDATA-parser met de instructies:

    // ]]>

  7. Stel de pagina-indeling in met CSS om de grotere achtergrondafbeelding te plaatsen en het vergrotingsvenster grenst aan de code:

    type = "text / css"> #monaimage {margin-left: 200px; } #glass {background-repeat: no-repeat; achtergrondpositie: linksboven; breedte: 250 px; hoogte: 170 px; padding-top: 10px; padding-links: 89px; marge: 0; positie: absoluut; display: geen; } # glass-image {background-image: url ('myImageLarge.jpg'); breedte: 150 px; hoogte: 150 px; grensradius: 75 px; -moz-border-radius: 75 px; achtergrondherhaling: geen herhaling; achtergrondkleur: #fff; marge: 0; opvulling: 0; cursor: geen; }

  8. Schrijf de HTML-code om de pagina weer te geven in de sectie "body":

    >

    Beweeg de muis over de afbeelding

tips

  • Deze code is afhankelijk van CSS3 om een ​​veld voor ronde vergroting te maken en werkt mogelijk niet in oudere browsers. Voor achterwaartse compatibiliteit met oudere CSS-implementaties, stelt u een rechthoekig veld in voor "# glass-image" (vergrootglas).

waarschuwing

  • Zonder de CDATA-tags proberen browsers operators kleiner dan "<" en groter dan ">" te parseren als HTML-tags. Betrek altijd Javascript- en jQuery-operators met de CDATA-tags om "script" -mislukkingen te voorkomen.