Întreaga caracteristică a marcajului este să atribuiți imaginilor unde intenționați să folosiți lupa, magnifierul de clasă.
Ei bine, în consecință, lățimea imaginii trebuie să fie stabilită, mai mică decât este în realitate, astfel încât să existe ceva de aproximat.
Când utilizatorul îndreaptă spre imagine, apare o lupă. Efectul de sticlă este realizat datorită colțurilor rotunjite și umbrelor.
sticlă # 123;
lățime. 175 px;
înălțime. 175 px;
poziție. absolută;
border-radius. 50%;
cursor. crosshair;
/ * Crearea unui efect de sticlă * /
box-shadow.
0 0 0 7px rgba # 40; 255, 255, 255, 0,85 # 41;.
0 0 7px 7px rgba # 40; 0. 0. 0. 0,25 # 41;.
inset 0 0 40px 2px rgba # 40; 0. 0. 0. 0,25 # 41; ;
/ * Initial ascuns * /
afișare. nici unul;
# 125;
Lupa, mai exact blocul div glass, este creat folosind instrumentele jQuery, când cursorul este afișat cu ajutorul metodei fadeIn. Dar despre totul în ordine.
Și astfel, codul de mai jos formează blocul div div. care este o lupă:
// Adăugați lupa
dacă # 40; UI. magniflier. lungime # 41; # 123;
var div = document. createElement # 40; 'Div' # 41; ;
div. setAttribute # 40; „Clasa“. „Sticlă“ # 41; ;
UI. sticlă = $ # 40; div # 41; ;
$ # 40; „Corp“ # 41;. adăuga # 40; div # 41; ;
# 125;
Cu toate acestea, înainte de a forma o zonă extinsă a imaginii și de ao arăta, trebuie să efectuăm mai multe acțiuni. Și primul lucru de care aveți nevoie este să determinați poziția cursorului pe pagină.
Pentru comoditate, am pus această funcție într-o variabilă:
// Determinați poziția cursorului
var mouseMove = funcție # 40; e # 41; # 123;
var $ el = $ # 40; acest # 41; ;
// Obțineți indentarea în partea stângă și în partea de sus a imaginii
var magnify_offset = cur_img. ofset # 40; # 41; ;
// Poziția cursorului deasupra imaginii
// pageX / pageY sunt valorile x și y ale poziției cursorului de la marginea browserului
mouse-ul. x = e. pageX - magnify_offset. stânga;
mouse-ul. y = e. pagina Y - magnify_offset. top;
// Lupa trebuie afișată numai când indicatorul mouse-ului este deasupra imaginii
// Când cursorul este îndepărtat de imagine, atenuarea luptei
// Prin urmare, este necesar să verificați dacă poziția cursorului părăsește limitele imaginii
dacă # 40;
mouse-ul. x
mouse-ul. y> 0
# 41; # 123;
// Dacă condiția este adevărată, atunci continuați
mări # 40; e # 41; ;
# 125;
altfel # 123;
// altfel ne ascundem
UI. sticlă. fadeOut # 40; 100 # 41; ;
# 125;
Următorul pas este să calculați poziția luptei deasupra imaginii și poziția imaginii în lupă (deoarece suprafața lărgită a imaginii va fi fundalul pentru unitatea de sticlă). După calcul, valorile rezultate sunt atribuite proprietăților CSS ale blocului de sticlă:
var magnify = funcție # 40; e # 41; # 123;
// Imaginea principală va fi fundalul în caseta div
// astfel încât trebuie să calculați poziția fundalului în acest bloc
// față de poziția cursorului de deasupra imaginii
//
// Deci, calculam poziția de fundal
// și a pune datele într-o variabilă
// care va fi folosit ca valoare
// proprietăți pentru poziția de fond
var rx = Matematică. rotund # 40; mouse-ul. x / cur_img. lățime # 40; # 41; * nativ_width - ui. sticlă. lățime # 40; # 41; / 2 # 41; * - 1;
var = Math. rotund # 40; mouse-ul. y / cur_img. înălțime # 40; # 41; * native_height - ui. sticlă. înălțime # 40; # 41; / 2 # 41; * - 1;
var bg_pos = rx + "px" + ry + "px";
// Acum determinați poziția luptei
// ie. de div de sticlă
// logica este simplă: se scade jumătate din lățimea / înălțimea luptei
// poziția cursorului pe pagină
var glass_left = e. pageX - ui. sticlă. lățime # 40; # 41; / 2;
var glass_top = e. paginaY - ui. sticlă. înălțime # 40; # 41; / 2;
// Acum atribuiți valorile rezultate proprietăților css ale bucla
UI. sticlă. css # 40; # 123;
la stânga. glass_left.
top. glass_top.
backgroundPosition. bg_pos
# 125; # 41; ;
Ultimul pas este de a gestiona evenimentul prin deplasarea cursorului peste imagine. În această procesare, efectuăm următoarele operații: determină elementul de imagine curent, dimensiunile sale reale, calea către imagine. Toate acestea sunt necesare pentru a calcula poziția și afișarea ulterioară a luptei.
// Mutați cursorul peste imagine
$ # 40; UI. magniflier # 41;. pe # 40; 'Mousemove'. funcție # 40; # 41; # 123;
// Apariția netedă a luptei
UI. sticlă. fadeIn # 40; 100 # 41; ;
// Imaginea curentă
cur_img = $ # 40; acest # 41; ;
// definiți calea spre imagine
var src = cur_img. attr # 40; 'Src' # 41; ;
// Dacă există src, setați fundalul pentru lupă
dacă # 40; src # 41; # 123;
UI. sticlă. css # 40; # 123;
'Background-image'. 'url (' + src + ')'.
„Context-repetare“. „Nu-repetare“
# 125; # 41; ;
# 125;
// Verificați dacă există o înregistrare a dimensiunii originale a imaginii native_width / native_height
// dacă nu, apoi calculați și creați o intrare pentru fiecare imagine
// altfel afișăm lupa cu mărire
dacă # 40; cur_img. date # 40; 'Native_width' # 41; # 41; # 123;
// Creați un obiect de imagine nou, cu curentul identic cu imaginea curentă
// Aceasta se face pentru a obține dimensiuni reale de imagine
// nu putem face acest lucru direct, deoarece atributul lățime specifică cealaltă valoare
var image_object = imagine nouă # 40; # 41; ;
image_object. onload = funcție # 40; # 41; # 123;
// această funcție va fi executată numai după încărcarea cu succes a imaginii
// și atâta timp cât este încărcat native_width / native_height sunt 0
// determina dimensiunea reală a imaginii
native_width = imagine_obiect. lățime;
native_height = imagine_obiect. înălțime;
// Înregistrați aceste date
cur_img. date # 40; 'Native_width'. native_width # 41; ;
cur_img. date # 40; 'Native_height'. native_height # 41; ;
// Apelați funcția Mouse mouse și se afișează buclă
mousemove. aplica # 40; acest lucru. argumente # 41; ;
UI. sticlă. pe # 40; 'Mousemove'. mousemove # 41; ;
image_object. src = src;
return;
# 125; altfel # 123;
// obțineți dimensiunile reale ale imaginilor
native_width = cur_img. date # 40; 'Native_width' # 41; ;
native_height = cur_img. date # 40; 'Native_height' # 41; ;
# 125;
// Apelați funcția Mouse mouse și se afișează buclă
mousemove. aplica # 40; acest lucru. argumente # 41; ;
UI. sticlă. pe # 40; 'Mousemove'. mousemove # 41; ;
# 125; # 41; ;
Asta e tot. Efectul de lupă pentru imagini este gata. Pentru o cunoaștere mai detaliată și în special pentru utilizare, recomand să descărcați codurile sursă, deoarece aici nu rezultă tot codul ❗
Articole similare
Trimiteți-le prietenilor: