Вся особливість розмітки полягає в тому щоб привласнити, тим зображенням, у яких планується використовувати лупу, клас magniflier.
Ну і відповідно повинна бути встановлена ширина зображення, менше ніж є насправді, щоб було що наближати.
Коли користувач наводить курсор на зображення з'являється збільшувальне скло. Ефект скла досягається завдяки округленим кутах і тіні.
glass # 123;
width. 175px;
height. 175px;
position. absolute;
border-radius. 50%;
cursor. crosshair;
/ * Створення ефекту скла * /
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; ;
/ * Спочатку приховано * /
display. none;
# 125;
Лупа, точніше блок div glass створюється засобами jQuery, при наведенні курсору виводиться методом fadeIn. Але про все по порядку.
І так, наступний код формує блок div glass. який є збільшувальним склом:
// Додаємо збільшувальне скло
if # 40; ui. magniflier. length # 41; # 123;
var div = document. createElement # 40; 'Div' # 41; ;
div. setAttribute # 40; 'Class'. 'Glass' # 41; ;
ui. glass = $ # 40; div # 41; ;
$ # 40; 'Body' # 41 ;. append # 40; div # 41; ;
# 125;
Однак, перш ніж ми сформуємо збільшену область зображення і покажемо її, потрібно зробити кілька дій. І перше що необхідно, так це визначити положення курсору на сторінці.
Для зручності поміщаємо цю функцію в змінну:
// Визначаємо положення курсора
var mouseMove = function # 40; e # 41; # 123;
var $ el = $ # 40; this # 41; ;
// Отримуємо відступи до краю картинки зліва і зверху
var magnify_offset = cur_img. offset # 40; # 41; ;
// Позиція курсору над зображенням
// pageX / pageY - це значення по х і у положення курсора від країв браузера
mouse. x = e. pageX - magnify_offset. left;
mouse. y = e. pageY - magnify_offset. top;
// Збільшувальне скло повинне відображатися тільки коли покажчик миші знаходиться над картинкою
// При відведенні курсору від картинки відбувається плавне загасання лупи
// Тому необхідно перевірити, чи не виходить за межі картинки положення курсора
if # 40;
mouse. x
mouse. y> 0
# 41; # 123;
// Якщо умова істинно то переходимо далі
magnify # 40; e # 41; ;
# 125;
else # 123;
// інакше приховуємо
ui. glass. fadeOut # 40; 100 # 41; ;
# 125;
Наступним кроком є, розрахунок положення лупи над картинкою і положення зображення в лупі (тому що збільшена область зображення буде фоном для блоку glass). Після розрахунку отримані значення присвоюємо CSS властивостями блоку glass:
var magnify = function # 40; e # 41; # 123;
// Основне зображення буде в якості фону в блоці div glass
// тому необхідно розрахувати положення фону в цьому блоці
// щодо положення курсора над картинкою
//
// Таким чином ми розраховуємо положення фону
// і заносимо отримані дані в змінну
// яка буде використовуватися в якості значення
// властивості background-position
var rx = Math. round # 40; mouse. x / cur_img. width # 40; # 41; * Native_width - ui. glass. width # 40; # 41; / 2 # 41; * - 1;
var ry = Math. round # 40; mouse. y / cur_img. height # 40; # 41; * Native_height - ui. glass. height # 40; # 41; / 2 # 41; * - 1;
var bg_pos = rx + "px" + ry + "px";
// Тепер визначимо положення самого збільшувального скла
// тобто блоку div glass
// логіка проста: половину ширини / висоти лупи віднімаємо з
// положення курсора на сторінці
var glass_left = e. pageX - ui. glass. width # 40; # 41; / 2;
var glass_top = e. pageY - ui. glass. height # 40; # 41; / 2;
// Тепер присвоюємо отримані значення css властивостями лупи
ui. glass. css # 40; # 123;
left. glass_left.
top. glass_top.
backgroundPosition. bg_pos
# 125; # 41; ;
Останній крок - обробка події рух курсора над зображенням. У даній обробці ми виконуємо наступні операції: визначаємо поточний елемент зображення, його реальні розміри, шлях до зображення. Все це необхідно для розрахунку положення і подальшого показу лупи.
// Рух курсору над зображенню
$ # 40; ui. magniflier # 41 ;. on # 40; 'Mousemove'. function # 40; # 41; # 123;
// Плавне поява лупи
ui. glass. fadeIn # 40; 100 # 41; ;
// Поточне зображення
cur_img = $ # 40; this # 41; ;
// визначаємо шлях до картинки
var src = cur_img. attr # 40; 'Src' # 41; ;
// Якщо існує src, встановлюємо фон для лупи
if # 40; src # 41; # 123;
ui. glass. css # 40; # 123;
'Background-image'. 'Url (' + src + ')'.
'Background-repeat'. 'No-repeat'
# 125; # 41; ;
# 125;
// Перевіряємо чи є запис про первісному розмірі картинки native_width / native_height
// якщо ні, значить обчислюємо і створюємо про це запис для кожної картинки
// інакше показуємо лупу зі збільшенням
if # 40 ;. cur_img. data # 40; 'Native_width' # 41; # 41; # 123;
// Створюємо новий об'єкт зображення, з актуальною ідентичний актуальному зображенню
// Це зроблено для того щоб отримати реальні розміри зображення
// зробити безпосередньо ми цього не може, так як в атрибуті width вказано ін значення
var image_object = new Image # 40; # 41; ;
image_object. onload = function # 40; # 41; # 123;
// ця функція виконається тільки тоді після успішного завантаження зображення
// а до тих пір поки завантажується native_width / native_height рівні 0
// визначаємо реальні розміри картинки
native_width = image_object. width;
native_height = image_object. height;
// Записуємо ці дані
cur_img. data # 40; 'Native_width'. native_width # 41; ;
cur_img. data # 40; 'Native_height'. native_height # 41; ;
// Викликаємо функцію mouseMove і відбувається показ лупи
mouseMove. apply # 40; this. arguments # 41; ;
ui. glass. on # 40; 'Mousemove'. mouseMove # 41; ;
image_object. src = src;
return;
# 125; else # 123;
// отримуємо реальні розміри зображення
native_width = cur_img. data # 40; 'Native_width' # 41; ;
native_height = cur_img. data # 40; 'Native_height' # 41; ;
# 125;
// Викликаємо функцію mouseMove і відбувається показ лупи
mouseMove. apply # 40; this. arguments # 41; ;
ui. glass. on # 40; 'Mousemove'. mouseMove # 41; ;
# 125; # 41; ;
На цьому все. Ефект лупи для зображень готовий. Для більш детального знайомства і вже тим більше використання рекомендую завантажити вихідні, так як тут наведено не весь код ❗