Slik oppretter du en forhåndsvisningseffekt av bildet ved hjelp av jQuery

I denne opplæringen vil jeg vise deg hvordan du kan utnytte kraften til jQuery for å lage en forhåndsvisning av musepekeren over et bilde med et bildegalleri på en HTML-dokumentside. For denne demonstrasjonen trenger du en grunnleggende kunnskap om CSS-, JavaScript- og HTML-kodingsteknikker. Vi vil også inkorporere flere HTML5 og CSS3 elementer i den endelige brikken. Filene som brukes i denne demonstrasjonen er tilgjengelige her. Min mus for denne opplæringen er kreditert Alen Grakalić, og hans innsats med Css Globe.

Først oppretter vi et stilark og navngir filen styles.css, og lagrer det deretter i en underkatalog kalt css under webkatalogen. Disse vil definere kroppen, hovedklassen, galleriklassen, h1, h2, anker, pre, bilde, uordnet liste og listeelementer, og forhåndsvisnings-ID. Jeg vil nærmere beskrive flere spesifikke stylingdefinisjoner som de gjelder for flere av disse elementene nedenfor. CSS-koden inneholder også flere CSS3-stylinger for boksskygge og tekstskygge; koden i stilarket vises nedenfor:

 @charset "utf-8"; 
 / * CSS-dokument * / 
 kropp { 
 margin: 0; 
 padding: 40px; 
 bakgrunn: # B1B1B1; 
 font-family: Tahoma, Geneva, sans-serif; 
 font-vekt: normal; 
 color: # 555; 
 linje-høyde: 180%; 
 } 
 .main { 
 background-color: #DDFBEF; 
 bredde: 460px; 
 margin-venstre: 100 piksler; 
 margin: 0 auto; 
 padding: 10px; 
 min-høyde: 500 piksler; 
 } 
 .galleri { 
 background-color: #ebebeb; 
 min-høyde: 150 piksler; 
 polstring: 5px 0px 10px 10px; 
 boksskygge: 2px 2px 3px rgba (150, 150, 150, 0, 75); 
 margin-bottom: 25px; 
 bredde: 445px; 
 } 
 h1 { 
 font-size: 28px; 
 font-vekt: normal; 
 color: # 22411D; 
 tekstskygge: 1px 2px 1px rgba (150, 150, 150, 0, 75); 
 } 
 h2 { 
 font-size: 22 pikslene; 
 font-vekt: normal; 
 color: # 526F78; 
 tekstskygge: 1px 2px 1px rgba (150, 150, 150, 0, 75); 
 } 
 en { 
 text-decoration: none; 
 color: # f30; 
 } 
 pre { 
 viser: blokk; 
 font-family: Tahoma, Geneva, sans-serif; 
 font-vekt: normal; 
 padding: 7px; 
 grense: 3px solid # bae2f0; 
 bakgrunn: # e3f4f9; 
 margin: .5em 0; 
 flow: auto; 
 bredde: 800 ganger; 
 } 
 img { 
 border: 0px; 
 boks-skygge: 2px 2px 3px # 555562; 
 } 
 ul, li { 
 margin: 0; 
 padding: 0; 
 } 
 li { 
 list-style: none; 
 float: venstre; 
 viser: inline; 
 margin-right: 10px; 
 } 
 #preview { 
 stilling: absolutt; 
 grense: 3px solid #ccc; 
 bakgrunn: # 333; 
 padding: 5 px; 
 display: none; 
 farge: #fff; 
 boksskygge: 4px 4px 3px rgba (103, 115, 130, 1); 
 } 
Deretter vil vi sette opp bildene som skal brukes til demonstrasjonen, og disse vil bli inneholdt i en nettkatalog med navn. Hvert bilde krever originalen, som i denne demonstrasjonen er satt til en bredde på 400 piksler og en høyde på 320 piksler, og de endrede størrelse på miniatyrbildene er satt til 100 x 80, lagret som JPG (eks., 1t.jpg). Bildene som brukes i denne demonstrasjonen er arkivklipp (royaltyfritt), vist i figur A :

Deretter starter vi HTML-dokumentet vårt med HTML5-elementer, setter doktype, språk, hode, meta, tittel, beskrivelse, skript og ekstern kobling til stilarket. Filen lagres i roten til webkatalogen som index.html, og kodebiten vises nedenfor:

 Forhåndsvisning av bilder ved hjelp av jQuery 

Legg merke til skriptkilden peker til underkatalogen "js", som finnes i nettkatalogen. Dette er jQuery-kildefilen, som kreves for at jQuery-skriptene skal kjøres i dokumentet.

Deretter lager vi en og to som vil inneholde to enkle gallerier, det ene for galleriet "Landskap" og det andre for "Still Life" -galleriet. HTML-koden vises nedenfor:

Forhåndsvisning av bilder ved hjelp av jQuery

Landskapsgalleri

  • Still Life Gallery

    • Legg merke til at bildeforankringene får en klasse = "forhåndsvisning", som angir den absolutte posisjonen, grensen, bakgrunnsfargen, 5 pikslers polstring og en boksskygge for hvert bilde. Klassen kalles også i jQuery-funksjonene, som vil vises og forklares nedenfor. Klassen = "galleri" setter bakgrunnsfargen til #EBEBEB, minimumshøyden til 150 piksler, en polstring på 5 piksler 0 piksler 10 piksler 10 piksler, med en toppmargin på 25 piksler og en bredde på 445 piksler.

      Deretter setter vi skriptingen med åpningskoden til JavaScript og starter jQuery med dokumentklar funksjon. Som en generell regel, liker jeg å plassere all min in-line scripting nederst i HTML-filen rett før lukkekoden. Startskriptkoden vises i kodebiten nedenfor:

       // Start av jQuery med dokumentklar funksjon ved sideinnlasting 
       $ (Document) .ready (function () { 
       imagePreview (); 
       }); 

      Deretter setter vi x og y forskyvningskonfigurasjoner som vil stille de horisontale og vertikale justeringene som gjelder hvor langt nede og hvor langt til høyre for miniatyrbildet forhåndsvisningen av bildet vises. Kodestykket vises nedenfor:

       // Konfigurasjon av forskyvningene x og y 
       this.imagePreview = function () { 
       xOffset = -20; 
       yOffset = 40; 

      XOffset = -20 bringer forhåndsvisningen ned 20 piksler i forhold til miniatyrbildet, og yOffset = 40 bringer forhåndsvisningen til høyre 40 piksler i forhold til miniatyrbildet.

      Den neste kodebiten setter hoverfunksjonen sammen med bildeteksttittelen; det setter også forskyvninger og fade i å sakte.

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

      "+ c +"

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

      De neste funksjonene fjerner forhåndsvisningen og bildeteksttittelen når svevet er utenfor bildet, sammen med "mousemove" som lar forhåndsvisningen bevege seg i forhold til hvor markøren er innenfor miniatyrbildet, og til slutt, det avsluttende skriptet stikkord:

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

      Og dernest et eksempel på forhåndsvisningseffekten over det andre landskapsbildet, som vist i figur C :

      Igjen kan du laste ned alle filene for denne demonstrasjonen av forhåndsvisning av bildet her.

      For ytterligere lesing, sjekk ut disse ressursene:

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

      © Copyright 2021 | pepebotifarra.com