Всички функция за маркиране е да се възложи, образът, който планирате да използвате лупа, magniflier клас.

Е и, съответно, трябва да се създаде ширина на изображението е по-малка отколкото е в действителност, така че се приближаваше.

Когато потребителят се движи курсора на мишката върху изображението се появява лупа. стъкло ефект се постига благодарение на заоблените ъгли и сянката.

стъкло # 123;
ширина. 175px;
височина. 175px;
позиция. абсолютна;
граничен радиус. 50%;
курсора. мерник;

/ * Създаване на стъкло ефект * /
кутия-сянка.
0 0 0 7px RGBA # 40; 255. 255. 255. 0,85 # 41.
0 0 7px 7px RGBA # 40; 0. 0. 0. 0,25 # 41.
вмъкнати 0 0 40px 2px RGBA # 40; 0. 0. 0. 0,25 # 41; ;

/ * Първоначално мейл * /
дисплея. няма;
# 125;

Лупа, а Разделение стъкло блок се създава JQuery означава, че когато курсорът се появява от fadeIn. Но първо първите неща.

И така, следния код създава блок Разделение стъкло. което е лупа:

// добавите лупа
ако # 40; UI. magniflier. дължина # 41; # 123;
Var DIV = документ. createElement # 40; "Div" # 41; ;
Разделение. setAttribute # 40; "Клас". "Глас" # 41; ;
UI. стъкло = $ # 40; Разделение # 41; ;

$ # 40; "Body" # 41. прибавям # 40; Разделение # 41; ;
# 125;

Въпреки това, преди да се образува по-голяма площ на изображението и го покажете, трябва да се направи някакво действие. И първото нещо, което е необходимо е да се определи позицията на курсора на страницата.

За удобство, ние поставяме на функцията в променлива:

// Определяне на местоположението на курсора
Var mouseMove = функция # 40; д # 41; # 123;
Var $ = $ ел # 40; това # 41; ;

// Получаване на отклонението до ръба на снимката в ляво и отгоре
Var magnify_offset = cur_img. офсет # 40; # 41; ;

// позицията на курсора върху снимката
// страница X / pageY - са стойностите на х и у позиция на курсора на краищата на браузъра
мишка. х = напр. страница X - magnify_offset. ляв;
мишка. у = напр. pageY - magnify_offset. отгоре;

// лупа трябва да се показва само, когато мишката е върху картината
// Ако оттегляне от изображението на курсора е гладка амортисьорния лупи
// Поради това е необходимо да се провери, там отвъд позицията на образа на курсора
ако # 40;
мишка. х мишка. ш мишка. пространство х> 0
мишка. и у> 0
# 41; # 123;
// Ако състоянието е вярно, след това отидете на
увеличавам # 40; д # 41; ;
# 125;
още # 123;
// в противен случай се скрие
UI. стъкло. fadeOut # 40; 100 # 41; ;
# 125;

Следващата стъпка е изчисляване на позицията на изображението на лупа и позицията на изображението в контура (от увеличена част на изображението ще бъде фон за стъкло блок). След изчисляване на стойностите, получени за възлагане CSS свойства стъкло единица:

Var Magnify = функция # 40; д # 41; # 123;

// Основното изображение е на заден план в стъклото на блок Разделение
// така че е необходимо да се изчисли позицията на заден план в този блок
// спрямо позицията на курсора върху снимката
//
// Така че ние очакваме да поставите на заден план
// и съхранява данните в променлива
// който се използва като стойността на
// фон-позиция собственост

Var RX = Math. кръг # 40; мишка. х / cur_img. широчина # 40; # 41; * Native_width - UI. стъкло. широчина # 40; # 41; / 2 # 41; * - 1;
Var RY = Math. кръг # 40; мишка. г / cur_img. височина # 40; # 41; * Native_height - UI. стъкло. височина # 40; # 41; / 2 # 41; * - 1;
Var bg_pos = RX + "пиксела" + RY + "пиксела";

// Сега ние определяме позицията на лупата
// т.е. Разделение стъкло блок
// логика е проста: половината ширина / височина на Изваждане на лупа
// позиция на курсора на страницата

Var glass_left = напр. страница X - UI. стъкло. широчина # 40; # 41; / 2;
Var glass_top = напр. pageY - UI. стъкло. височина # 40; # 41; / 2;

// Сега определя стойностите, получени лупа CSS свойства
UI. стъкло. CSS # 40; # 123;
наляво. glass_left.
отгоре. glass_top.
backgroundPosition. bg_pos
# 125; # 41; ;

Последната стъпка - работа с движението на курсора на мишката върху изображението на събитието. В това отношение, ние изпълнете следните стъпки: определяне на текущото изображение позиция, реалните си размери, по пътя към изображението. Всичко това е необходимо, за да се изчисли позицията и след това да се покаже лупата.

// Преместете курсора върху снимката
$ # 40; UI. magniflier # 41. за # 40; "Mousemove". функция # 40; # 41; # 123;
// Fade лупи
UI. стъкло. fadeIn # 40; 100 # 41; ;
// Текущ картина
cur_img = $ # 40; това # 41; ;
// определи пътя на снимката
Var SRC = cur_img. ATTR # 40; "Src" # 41; ;
// Ако има SRC, задаване на фона на лупата
ако # 40; SRC # 41; # 123;
UI. стъкло. CSS # 40; # 123;
"Контекст изображение". "URL адрес (" + SRC +).
"Background-повторение". "Не-повторение"
# 125; # 41; ;
# 125;

// Проверете дали има запис на пълноразмерни изображения native_width / native_height
// ако не, тогава се изчисли и да се създаде този запис за всяка снимка
// друго показват лупа с увеличение на

ако # 40. cur_img. данни # 40; "Native_width" # 41; # 41; # 123;

// създаване на нов обект изображение идентична със сегашната действителния образ
// Това се прави с цел да се получи от действителния размер на изображението
// направите това директно, ние не можем, защото ширина атрибут определена стойност и т.н.

Var image_object = нова картинка # 40; # 41; ;

image_object. при зареждане = функция # 40; # 41; # 123;

// тази функция ще се изпълнява само след успешен образ обувка
// и до натоварен native_width / native_height са 0

// определяне на действителния размер на изображението
native_width = image_object. ширина;
native_height = image_object. височина;

// Напишете данните
cur_img. данни # 40; "Native_width". native_width # 41; ;
cur_img. данни # 40; "Native_height". native_height # 41; ;

// Call функция mouseMove случва лупи показват
mouseMove. прилага # 40; това. аргументи # 41; ;
UI. стъкло. за # 40; "Mousemove". mouseMove # 41; ;

image_object. SRC = SRC;

се върне;
# 125; още # 123;
// получите действителния размер на изображението
native_width = cur_img. данни # 40; "Native_width" # 41; ;
native_height = cur_img. данни # 40; "Native_height" # 41; ;
# 125;

// Call функция mouseMove случва лупи показват
mouseMove. прилага # 40; това. аргументи # 41; ;
UI. стъкло. за # 40; "Mousemove". mouseMove # 41; ;
# 125; # 41; ;

Това е всичко. лупа ефект за изображения готови. За по-подробна информация, камо ли да го използвате, се препоръчва да изтеглите изходния код, както е показано тук, не всички са код ❗

Свързани статии

• лупа ефект за сайт - мащабиране на изображения с помощта на JQuery

• лупа ефект за изображения с помощта на JQuery, Rudebox