A hatás a nagyító képe, xozblog - tanulságok és cikkek weboldal, blog
Minden jelölő funkció rendelni, a kép, hogy azt tervezi, hogy egy nagyítóval, magniflier osztályban.
Nos, és ennek megfelelően kell beállítani a kép szélessége kisebb, mint amilyen valójában, úgyhogy közeledik.
Amikor a felhasználó mozgatja a kurzort a kép megjelenik egy nagyító. üveg hatás érhető el, köszönhetően a lekerekített sarkok és árnyék.
üveg # 123;
szélessége. 175px;
magasságot. 175px;
helyzetbe. abszolút;
border-radius. 50%;
kurzor. célkereszt;
/ * Új üveg hatása * /
box-árnyék.
0 0 0 7px RGBA # 40; 255. 255. 255. 0,85 # 41;.
0 0 7px 7px RGBA # 40; 0. 0. 0. 0,25 # 41;.
süllyesztés 0 0 40px 2px RGBA # 40; 0. 0. 0. 0,25 # 41; ;
/ * Kezdetben Privát * /
kijelzőn. none;
# 125;
Nagyító, hanem div üvegtégla létrejön jQuery azt jelenti, ha a kurzor jelenik meg fadeIn. De kezdjük az elején.
És így, a következő kód létrehoz egy blokkot div üveg. amely egy nagyító:
// hozzá egy nagyító
ha # 40; ui. magniflier. hossz # 41; # 123;
var div = dokumentumot. createElement # 40; 'Div' # 41; ;
div. setAttribute # 40; „Osztály”. 'Glass' # 41; ;
ui. üveg = $ # 40; div # 41; ;
$ # 40; 'Body' # 41;. mellékel # 40; div # 41; ;
# 125;
Mielőtt azonban egy nagyobb területet a kép, és mutasd meg, meg kell, hogy bizonyos intézkedéseket. És az első dolog, ami szükséges az, hogy meghatározza a helyzetét a kurzor az oldalon.
Az egyszerűség kedvéért tesszük a funkciót egy változót:
// Határozza meg a helyét a kurzor
var MouseMove = funkció # 40; e # 41; # 123;
var $ el = $ # 40; ezt # 41; ;
// Az eltolás a kép széle a bal felső
var magnify_offset = cur_img. eltolt # 40; # 41; ;
// Vigye a kurzort a kép fölé
// pageX / pageY - azok az értékek, az x és y a kurzor a széleit a böngésző
egér. X = e. pageX - magnify_offset. bal oldalon;
egér. y = e. pageY - magnify_offset. top;
// A nagyító kell jelenik meg, ha az egér a kép fölé
// Ha kivonását a kurzort a kép a sima csillapító nagyítók
// Ezért szükséges, hogy utánanéz, ott túl a kép a kurzor
ha # 40;
egér. x
egér. és y> 0
# 41; # 123;
// Ha a feltétel igaz, akkor megy
nagyobbít # 40; e # 41; ;
# 125;
más # 123;
// egyébként elrejtése
ui. üveg. fadeOut # 40; 100 # 41; ;
# 125;
A következő lépés a számítás a helyzetét a nagyító képet, és a kép helyzetét a hurok (mivel a nagyított részlete lesz a kép a háttérben az üveg blokk). Kiszámítása után kapott értékek hozzárendelésére CSS tulajdonságok üveg egység:
var Nagyítás = funkció # 40; e # 41; # 123;
// A fő kép a háttérben a blokk div üveg
// így kell számítani a helyzet a háttérben ez a blokk
// képest a kurzor pozícióját a képen
//
// Így azt várjuk, hogy helyezze el a háttérben
//, és tárolja az adatokat egy változó
// amit használnak, mint az értéke
// background-position tulajdonság
var rx = Math. kerek # 40; egér. x / cur_img. szélesség # 40; # 41; * Native_width - ui. üveg. szélesség # 40; # 41; / 2 # 41; * - 1;
var Ry = Math. kerek # 40; egér. y / cur_img. magasság # 40; # 41; * Native_height - ui. üveg. magasság # 40; # 41; / 2 # 41; * - 1;
var bg_pos = rx + "px" + ry + "px";
// Most helyzetének meghatározására a nagyító
// azaz div üvegtégla
// logika egyszerű: a fele a szélesség / magasság a nagyító kivonás
// a kurzor az oldalon
var glass_left = e. pageX - ui. üveg. szélesség # 40; # 41; / 2;
var glass_top = e. pageY - ui. üveg. magasság # 40; # 41; / 2;
// Most hozzá kapott értékek nagyító CSS tulajdonságok
ui. üveg. css # 40; # 123;
maradt. glass_left.
tetején. glass_top.
backgroundPosition. bg_pos
# 125; # 41; ;
Az utolsó lépés - az esemény kezelése mozgatni a kurzort a kép fölé. Ebben a kezelés, akkor hajtsa végre a következő lépéseket: meghatározzuk az aktuális tétel kép, valódi méreteit, az elérési utat a képet. Mindez kell kiszámítani a helyzetbe, majd megjelenik a nagyító.
// kurzor mozgatása a kép fölé
$ # 40; ui. magniflier # 41;. tovább # 40; 'MouseMove'. függvény # 40; # 41; # 123;
// Fade nagyítók
ui. üveg. fadeIn # 40; 100 # 41; ;
// Az aktuális kép
cur_img = $ # 40; ezt # 41; ;
// meghatározzák az utat, hogy a kép
var src = cur_img. attr # 40; 'Src' # 41; ;
// Ha van egy src, meg a hátteret a nagyító
ha # 40; src # 41; # 123;
ui. üveg. css # 40; # 123;
„Háttér-kép”. 'URL (' + src + ')'.
'Background-repeat'. 'No-repeat'
# 125; # 41; ;
# 125;
// Ellenőrizze, hogy van egy rekord a teljes méretű képek native_width / native_height
// ha nem, akkor számítani, és hozzon létre ezt a rekordot minden egyes kép
// egyébként azt mutatják, nagyító növekedése
ha # 40;. cur_img. adat # 40; 'Native_width' # 41; # 41; # 123;
// Létrehozunk egy új objektumot kép megegyezik az aktuális kép tényleges
// Ezt annak érdekében, hogy a tényleges mérete a kép
// ezt közvetlenül, nem tudjuk, mert a szélesség attribútum megadott érték, stb
var image_object = new Image # 40; # 41; ;
image_object. onload = function # 40; # 41; # 123;
// ez a funkció kerül végrehajtásra csak egy sikeres boot image
// és amíg betöltött native_width / native_height 0
// meghatározza a tényleges mérete a kép
native_width = image_object. szélessége;
native_height = image_object. magasság;
// Írja az adatokat
cur_img. adat # 40; 'Native_width'. native_width # 41; ;
cur_img. adat # 40; 'Native_height'. native_height # 41; ;
// hívás funkció MouseMove történik nagyító mutatnak
MouseMove. alkalmaz # 40; ezt. érvek # 41; ;
ui. üveg. tovább # 40; 'MouseMove'. MouseMove # 41; ;
image_object. src = src;
return;
# 125; más # 123;
// kap a tényleges mérete a kép
native_width = cur_img. adat # 40; 'Native_width' # 41; ;
native_height = cur_img. adat # 40; 'Native_height' # 41; ;
# 125;
// hívás funkció MouseMove történik nagyító mutatnak
MouseMove. alkalmaz # 40; ezt. érvek # 41; ;
ui. üveg. tovább # 40; 'MouseMove'. MouseMove # 41; ;
# 125; # 41; ;
Ez minden. nagyító hatású képek kész. További részletes információkat, sokkal kevésbé használja ajánlott letölteni a forráskódot, ahogy itt nem minden kód ❗