Cum se creează un efect de lupă pe un site web

Conţinut

• instrucțiuni de ghidare
• sfaturi
• avertisment

Oferirea vizitatorilor site-ului dvs. oportunitatea de a privi o imagine în detaliu necesită un pic de manipulare a acestor imagini. Adăugând un mic CSS, JavaScript și jQuery la compoziția puteți crea efectul unei lupă, pe măsură ce indicatorul mouse-ului se deplasează peste o imagine pe pagină. Acest efect este realizat prin crearea unei ferestre mici care afișează imaginea de fundal când indicatorul mouse-ului se deplasează peste imaginea afișată în prim-plan.

instrucțiuni de ghidare

Dați vizitatorilor pe site-ul dvs. un "close-up" al imaginii (Imagini Brand X / Imagini Brand X / Getty Images)

1. Includeți JavaScript și jQuery în secțiunea "cap" a codului HTML cu instrucțiunile:

   În acest exemplu, biblioteca jQuery este localizată în directorul HTML implicit.

2. Introduceți o etichetă CDATA pentru a împiedica încercările browserului de a analiza operatorii jQuery:

3. Setați variabilele de înălțime și lățime utilizate pentru afișarea imaginilor:

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

4. Setați condițiile pentru pornirea funcției de mărire. Când este apelat, această funcție înlocuiește cursorul mouse-ului cu un vizualizator circular al celei mai mari imagini acoperite, atunci când utilizatorul trece peste imaginea mai mică afișată pe pagină. Creați acest exemplu cu codul:

   
   

   $ (document) .ready (funcția () {

   $ ("# myimage") mouseover (funcția (e) {$ (document) .mousemove (myMM);

   });

5. Setați funcția de mărire și parametrii de finalizare. În acest exemplu, imaginea ascunsă este mărită cu dimensiunea dublă a imaginii mai mici, iar fereastra de mărire dispare atunci când indicatorul mouse-ului se mișcă în afara limitelor imaginii mai mici. Puteți face acest lucru cu codul:

   funcția myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# sticlă-imagine"); var sticlă = $ ("# glass"); var xs = e.pageX - myImage.offset () stânga; var ys = e.pageY - myImage.offset (). var bx = sticlaImage.width () / 2 - xsGreutate / greutate; var by = glassImage.height () / 2 - ysH / h; glass.css ("stânga", e.pageX-75-89 + "px"). css ("sus", e.pageY-75-10 + "px"); glassImage.css ("fundal-poziție", bx + "px" + cu + "px"); dacă (bx <-W || de <-H || bx> 150 || de> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ("rapid"); }}

   
   

6. Închideți scriptul "jQuery" și ștergeți parserul CDATA cu instrucțiunile:

   // ]]>

7. Setați aspectul paginii cu CSS pentru a poziționa imaginea de fundal mai mare și marginea ferestrei de mărire cu codul:

   tip = "text / css"> #monaimage {margin-stânga: 200px; } #glass {background-repeat: no-repeat; pozitie fundal: partea stanga sus; lățime: 250px; înălțime: 170px; padding-top: 10px; padding-left: 89px; marja: 0; poziția: absolută; afișare: niciuna; } # sticlă-imagine {background-image: url ('myImageLarge.jpg'); lățime: 150px; înălțime: 150px; raza de graniță: 75px; -moz-border-radius: 75px; fundal-repet: nu-repeta; fundal-culoare: #fff; marja: 0; umplutura: 0; cursor: nici unul; }

8. Scrieți codul HTML pentru a afișa pagina în secțiunea "corp":

   >

   Mutați cursorul peste imagine

   

sfaturi

• Acest cod depinde de CSS3 pentru a crea un câmp de mărire rotundă și poate să nu funcționeze în browserele mai vechi. Pentru compatibilitatea înapoi cu implementările CSS mai vechi, setați un câmp dreptunghiular pentru "# glass-image" (lupă).

avertisment

• Fără etichetele CDATA, browserele încearcă să parseze operatorii mai puțin de "<" și mai mari decât ">" ca etichete HTML. Implicați întotdeauna operatorii JavaScript și jQuery cu etichetele CDATA pentru a evita eșecurile de "script".