Sådan opretter du en billede-hover-preview-effekt ved hjælp af jQuery

I denne tutorial vil jeg vise dig, hvordan du udnytter kraften i jQuery til at oprette en forhåndsvisning af musemarkøren med et billedgalleri på en HTML-dokumentside. Til denne demonstration har du brug for en grundlæggende viden om CSS, JavaScript og HTML kodningsteknikker. Vi vil også inkorporere flere HTML5 og CSS3 elementer i det sidste stykke. De filer, der bruges i denne demonstration, er tilgængelige her. Min muse til denne tutorial er krediteret Alen Grakalić og hans indsats med Css Globe.

Først opretter vi et typografiark og navngiver filen styles.css, hvorefter det gemmes i en undermappe, der hedder css, under webmappen. Disse vil definere kroppen, hovedklassen, galleriklassen, h1, h2, anker, præ, billede, uordnet liste og listeelementer og preview-id. Jeg vil mere detaljeret beskrive flere specifikke stylingdefinitioner, da de gælder for flere af disse elementer nedenfor. CSS-koden inkluderer også adskillige CSS3-stylinger til kasseskygge og tekstskygge; koden indeholdt i typografiet vises nedenfor:

 @charset "utf-8"; 
 / * CSS-dokument * / 
 krop { 
 margin: 0; 
 padding: 40px; 
 baggrund: # B1B1B1; 
 font-familie: Tahoma, Genève, sans-serif; 
 font-weight: normal; 
 color: # 555; 
 line-height: 180%; 
 } 
 .main { 
 background-color: #DDFBEF; 
 bredde: 460px; 
 margin-left: 100px; 
 margin: 0 auto; 
 padding: 10px; 
 min-højde: 500px; 
 } 
 .gallery { 
 background-color: #ebebeb; 
 min-højde: 150 pixel; 
 polstring: 5px 0px 10px 10px; 
 kasseskygge: 2px 2px 3px rgba (150, 150, 150, 0, 75); 
 margin-bottom: 25px; 
 bredde: 445px; 
 } 
 h1 { 
 font-size: 28px; 
 font-weight: normal; 
 color: # 22411D; 
 tekstskygge: 1px 2px 1px rgba (150, 150, 150, 0, 75); 
 } 
 h2 { 
 font-size: 22px; 
 font-weight: normal; 
 color: # 526F78; 
 tekstskygge: 1px 2px 1px rgba (150, 150, 150, 0, 75); 
 } 
 en { 
 tekst-dekoration: ingen; 
 color: # F30; 
 } 
 præ { 
 vise: blokere; 
 font-familie: Tahoma, Genève, sans-serif; 
 font-weight: normal; 
 padding: 7PX; 
 kant: 3px solid # bae2f0; 
 baggrund: # e3f4f9; 
 margin: .5em 0; 
 overflow: auto; 
 bredde: 800px; 
 } 
 img { 
 kant: 0px; 
 kasseskygge: 2px 2px 3px # 555562; 
 } 
 ul, li { 
 margin: 0; 
 padding: 0; 
 } 
 li { 
 liste-stil: none; 
 flyde: venstre; 
 vise: inline; 
 margin-højre: 10px; 
 } 
 #preview { 
 position: absolut; 
 kant: 3px solid #ccc; 
 baggrund: # 333; 
 padding: 5px; 
 display: none; 
 farve: #fff; 
 kasseskygge: 4px 4px 3px rgba (103, 115, 130, 1); 
 } 
Derefter opsætter vi de billeder, der vil blive brugt til demonstrationen, og disse vil blive indeholdt i en web-undermappe, der hedder billeder . Hvert billede kræver originalen, som i denne demonstration er indstillet til en bredde på 400 pixels og en højde på 320 pixels, og de ændrede størrelse på miniaturerne er indstillet til 100 x 80, gemt som JPG'er (f.eks., 1t.jpg). De billeder, der bruges i denne demonstration, er stock-clipart (royaltyfrit), vist i figur A :

Derefter starter vi vores HTML-dokument med HTML5-elementer, hvor vi indstiller doktype, sprog, hoved, meta, titel, beskrivelse, scripts og ekstern linking til typografien. Filen gemmes i roden af ​​webkataloget som index.html, og kodestykket vises nedenfor:

 Billedeksempel ved hjælp af jQuery 

Bemærk, at scriptkilden peger på undermappen "js", der er indeholdt i webkataloget. Dette er jQuery-kildefilen, som er påkrævet for, at jQuery-scripts skal køre inden for dokumentet.

Dernæst opretter vi en og to, der vil indeholde to enkle gallerier, den ene til galleriet "Landskab" og den anden til "Still Life" -galleriet. HTML-koden vises nedenfor:

Billedeksempel ved hjælp af jQuery

Landskabsgalleri

  • Still Life Gallery

    • Bemærk, at billedforankringerne får en klasse = "preview", der indstiller den absolutte position, kant, baggrundsfarve, 5 pixel polstring og en boksskygge for hvert billede. Klassen kaldes også i jQuery-funktionerne, som vises og forklares nedenfor. Klassen = "galleri" indstiller baggrundsfarven til #EBEBEB, minimumshøjden til 150 pixels, en polstring på 5 pixels 0 pixels 10 pixels 10 pixels, med en øverste margen på 25 pixels og en bredde på 445 pixels.

      Dernæst sætter vi scripting med åbningskoden til JavaScript og starter jQuery med dokumentklar funktion. Som en generel regel vil jeg gerne placere al min in-line scripting i bunden af ​​HTML-filen lige før lukningskoden. Startskriptkoden vises i kodestykket nedenfor:

       // Start jQuery med funktionen til dokument klar til sideindlæsning 
       $ (Dokument) .ready (function () { 
       imagePreview (); 
       }); 

      Dernæst indstiller vi x- og y-offsetkonfigurationer, som indstiller de vandrette og lodrette justeringer, der gælder for hvor langt ned og hvor langt til højre for miniaturebilledet billedvisningen vises. Kodestykket vises nedenfor:

       // Konfiguration af x- og y-forskydningerne 
       this.imagePreview = funktion () { 
       xOffset = -20; 
       yOffset = 40; 

      XOffset = -20 bringer forhåndsvisningen ned 20 pixels i forhold til miniature, og yOffset = 40 bringer forhåndsvisningen til højre 40 pixels i forhold til miniature.

      Det næste kodestykker indstiller hoverfunktionen sammen med billedteksttitlen; det indstiller også forskydningerne og faden ind for at langsomt.

       $ ( "A.preview"). Hover (function (e) { 
       this.t = this.title; 
       this.title = ""; 
       var c = (dette.t! = "")? " 
      "+ dette.t:" ";
       $ ( "Krop"). Append (" 

      "+ c +"

      ");
       $ ( "# Preview") 
       .css ("top", (e.pageY - xOffset) + "px") 
       .css ("venstre", (e.sideX + yOffset) + "px") 
       .fadeIn ( "slow"); 
       }, 

      De næste funktioner fjerner forhåndsvisning og billedteksttitel, når hoveren er uden for billedområdet sammen med "mousemove", der gør det muligt for preview at bevæge sig i forhold til, hvor markøren er inden for miniaturebilledet, og til sidst det afsluttende script tag:

       fungere(){ 
       this.title = this.t; 
       $ ( "# Preview") fjerne ().; 
       }); 
       $ ( "A.preview"). MouseMove (funktion (e) { 
       $ ( "# Preview") 
       .css ("top", (e.pageY - xOffset) + "px") 
       .css ("venstre", (e.sideX + yOffset) + "px"); 
       }); 
       }; 
       Det endelige billedgalleri som vist i Chrome 18.0.1 er vist i figur B : 

      Dernæst et eksempel på forhåndsvisningseffekten over det andet landskabsbillede, som vist i figur C :

      Igen kan du downloade alle filerne til denne demo af billedet-preview-effekten her.

      For yderligere læsning, se disse ressourcer:

      • jQuery .append ()
      • jQuery .css ()
      • jQuery .fadeIn ()
      • jQuery .hover ()
      • jQuery .mousemove ()
      • jQuery. offset ()

      © Copyright 2020 | mobilegn.com