Hur man skapar förstoringsglasseffekt på en webbplats

Författare: Marcus Baldwin
Skapelsedatum: 18 Juni 2021
Uppdatera Datum: 13 Maj 2024
Anonim
Hur man skapar förstoringsglasseffekt på en webbplats - Artiklar
Hur man skapar förstoringsglasseffekt på en webbplats - Artiklar

Innehåll

Att ge besökare till din webbplats möjlighet att titta på en bild i detalj kräver lite manipulation av dessa bilder. Lägga till lite CSS, JavaScript och jQuery till kompositionen kan du skapa effekten av ett förstoringsglas när muspekaren rör sig över en bild på din sida. Denna effekt uppnås genom att skapa ett litet fönster som visar bakgrundsbilden när muspekaren rör sig över bilden som visas i förgrunden.


vägbeskrivning

Ge besökare på din webbplats en "närbild" av bilden (Brand X Pictures / Brand X Pictures / Getty Images)

  1. Inkludera JavaScript och jQuery i avsnittet "Huvud" i HTML-koden med anvisningarna:

    I det här exemplet finns jQuery-biblioteket i standard HTML-katalogen.

  2. Sätt i en CDATA-tagg för att förhindra att webbläsare försöker tolka jQuery-operatörer:

  3. Ställ in längd- och breddvariablerna som används för att visa bilderna:

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

  4. Ställ in de villkor som startar förstoringsfunktionen. Vid uppringning ersätter denna funktion muspekaren med en cirkelvisare av den största täckta bilden när användaren svävar över den mindre bilden som visas på sidan. Skapa den här förekomsten med koden:


    $ (dokument) .ready (funktion () {

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

    });

  5. Ställ in förstoringsfunktionen och slutföringsparametrarna. I det här exemplet förstoras den dolda bilden med dubbla storleken på den mindre bilden och förstoringsfönstret försvinner när muspekaren rör sig utanför gränserna för den mindre bilden. Du kan göra detta med koden:

    funktion myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-image"); var glas = $ ("# glas"); var xs = e.pageX - myImage.offset (). vänster; var ys = e.pageY - myImage.offset (). top; var bx = glassImage.width () / 2 - xsVikt / vikt var av = glassImage.height () / 2 - ysH / h; glass.css ("left", e.pageX-75-89 + "px"). css ("top", e.pageY-75-10 + "px"); glassImage.css ("background-position", bx + "px" + med + "px"); om (bx <-W || av <-H || bx> 150 || av> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ('fast'); }}


  6. Stäng jQuery "script" och ta bort CDATA-parsern med anvisningarna:

    // ]]>

  7. Ställ in sidlayouten med CSS för att placera den större bakgrundsbilden och förstoringsfönstret gränsar till koden:

    typ = "text / css"> #monaimage {margin-left: 200px; } #glas {background-repeat: no-repeat; Bakgrundsposition: Överst till vänster; bredd: 250px; höjd: 170px; padding-top: 10px; stoppning-vänster: 89px; marginal: 0; position: absolut; display: none; } # glasbild {bakgrundsbild: url ('myImageLarge.jpg'); bredd: 150px; höjd: 150px; gränsstråle: 75px; -moz-gränsen-radien: 75px; bakgrundsrepetition: nej-repetera; bakgrundsfärg: #fff; marginal: 0; vaddering: 0; markör: ingen; }

  8. Skriv HTML-koden för att visa sidan i avsnittet "kropp":

    >

    Flytta musen över bilden

tips

  • Den här koden beror på CSS3 för att skapa ett runda förstoringsfält och kanske inte fungerar i äldre webbläsare. För bakåtkompatibilitet med äldre CSS-implementeringar, sätt ett rektangulärt fält för "# glass-image" (förstoringsglas).

varning

  • Utan CDATA-taggarna försöker webbläsare att analysera operatörer mindre än "<" och större än ">" som HTML-taggar. Alltid involvera JavaScript och jQuery-operatörer med CDATA-taggarna för att undvika "script" -fel.