Main View - Скарбничка розробника. Все про дизайн, розробці та створенні сайтів
Main View - блог про дизайн, веб дизайн та веб розробці. Якщо ви займаєтеся розробкою веб сайтів, або цікавитеся веб дизайном і просто дизайном речей, які нас оточують, або вам просто цікава тематика веб дизайну та веб розробок, то цей блог буде вам дуже корисний. На блозі ви можете знайти статті, огляди, уроки і багато іншого.
Можливо, багато хто стикався із завданням створення цікавого ефекту при наведенні курсору миші на картинку. Звичайно, існує маса різних ефектів, які дуже пожвавлюють сайт завдяки тому, що користувач на свої дії бачить відповідь. Нещодавно мені знадобилося застосувати ефект збільшення при наведенні курсору миші. Я подумав, що реалізація цього ефекту може бути цікава і вам.
Як це виглядає
Як це працює
Для початку як завжди визначаємо мініатюри і створюємо контейнер, який буде містити наші зображення. Я вибрав такі розміри: мініатюра в нормальному вигляді має розмір 150х150 пікселів, а при наведенні курсору миші її розмір змінюється до 250х250 пікселів. Я навмисно вибрав такий великий розмах, щоб продемонструвати вам роботу самого ефекту. Насправді краще робити різницю не дуже великий, щоб ефект виглядав більш гладко.
Отже, наша структура:
Після цього нам потрібно призначити CSS правила для кожного з елементів. Наше завдання збудувати за допомогою CSS мініатюри в одну горизонтальну лінію. Без правил CSS мініатюри слідують вертикально Ідна за одною.
Додаємо наступний код:
Після цього кроку ми отримуємо потрібну нам розташування і зовнішній вигляд наших мініатюр. Довершує справу, додаючи функціонал jQuery. Код дуже простий і пояснювати його роботу я думаю не потрібно. Ми створюємо дві функції, які обробляють події наведення і втрати фокусу курсора миші.
Додаємо код на сторінку в секцію тега
Сподіваюся, ви не забули підключися саму бібліотеку jQuery перед цим.
Відпрацьовуючи, функції не тільки змінюють розміри зображення, але ще і зміщують його. Як видно у мене відбувається зміщення по горизонталі і по вертикалі на 50 пікселів. Якщо ви використовуєте інші розміри, вам потрібно перерахувати для свого випадку нове значення цих зсувів. Наприклад, якщо ваші мініатюри маю початкові розміри 100х100 пікселів, а збільшуєте ви їх до 200х200 пікселів, то ваше зміщення можна визначити як (200-100) / 2 = 50 пікселів. В даному випадку співпало з моїм зміщенням, але інших значеннях, звичайно, буде відрізнятися.
Ось і вся реалізація ефекту збільшення зображення при наведенні курсору миші. Сподіваюся, цей урок буде вам корисний. Дякуємо за увагу.
Залишайтеся на зв'язку
Читаючи цей сайт Ви даєте свою згоду на використання файлів Cookie. В іншому випадку покиньте цей сайт. погоджуюся