Як створити чистий ефект CSS onClick Image Zoom
У CSS немає псевдокласа події кліків націлювання, і це є одним з найбільші болючі точки розробників інтерфейсу. Найближчим псевдо-класом є : active
який стилює елемент за період часу, коли користувач натискає на нього мишкою.
Проте цей ефект недовговічний: коли користувач відпускає мишу, : active
більше не працює. Ми повинні знайти інший спосіб емулювати подію кліків у CSS.
Цей пост був написаний у відповідь на запит читача, і він буде пояснювати, як це зробити націлюйте подію кліку на чистий CSS у конкретному випадку використання, масштабування зображення.
Ви можете побачити кінцевий результат нижче - рішення для CSS Збільшення зображення на клік.
Коли потрібно використовувати рішення лише для CSS
Перш ніж продовжувати, я хочу сказати, що для масштабування зображення рекомендую використовувати лише метод CSS (який змінює розміри зображення), лише коли потрібно одномісний або a група з декількох зображень щоб мати функцію масштабування.
Для власне Галерея, JavaScript забезпечує більшу гнучкість і ефективність.
Передні кінцеві методи ми будемо використовувати
Тепер, коли ви були попереджені, давайте швидко переглянемо 3 ключові методи ми будемо використовувати:
- The
Тег HTML що дозволяє браузерам створювати зв'язані області над зображенням. Докладніше про
елемент у моїй попередній публікації.
- The
usemap
атрибуттег, що підключає зображення до карти зображення.
- The
: target
Псевдоклас CSS що представляє елемент, націлений за допомогою селектора ідентифікаторів.
1. Створіть HTML-базу
По-перше, створимо базу HTML. У наведеному нижче коді ми додаємо зображення, яке потрібно збільшити і розгорнути & значки закрити кнопки для збільшення та зменшення масштабу.
Важливо мати ідентифікатор на зображенні, яке потрібно збільшити, а кнопка "Закрити" повинна бути посиланням із зображенням href = "#"
атрибут, я поясню чому пізніше в пості.
2. Додайте CSS
Спочатку піктограму Закрити не повинні відображатися. The позиції
, маржа-
, зліва
, і знизу
властивості місце Розкрийте та закрийте піктограми де ми хочемо, щоб вони були - у верхньому правому куті зображення.
The покажчик-події: немає;
правило дозволяє миші подій пройти через піктограму Expand і досягти зображення.
.img висота: 150px; ширина: 200px; .close background-image: url ("Close-icon.png"); фон-повтор: без повтору; знизу: 418px; дисплей: немає; висота: 32px; ліворуч: 462px; margin-top: -32px; позиція: відносна; ширина: 32px; .expand bottom: 125px; margin-left: -32px; margin-right: 16px; покажчик-події: немає; позиція: відносна;
3. Додати карту зображень
На карті зображення клікабельна область має бути у верхньому правому куті зображення безпосередньо під піктограмою "Розгорнути" та його розміром. Помістіть елемент перед першим
в HTML. Ми будемо прив'язувати зображення до карти на наступному етапі.
У блоці коду вище, визначає тег форма, розмір і URI області зв'язку всередині карти зображення. Для прямокутної форми,
форми
атрибут приймає rect
значення, і чотири значення з шнури
атрибут представляють відстань у пікселях між:
- лівий край зображення & лівий край області посилання
- верхній край зображення & верхній край області посилання
- лівий край зображення & правий край області зв'язку
- верхній край зображення & нижній край області зв'язку
Значення href
атрибут повинен бути хеш-ідентифікатор зображення (тому зображення повинно мати id
).
4. Прив'яжіть зображення до карти зображення
Додати usemap
атрибут зображення так, щоб до прив'яжіть його до карти зображення. Його значення має бути хеш-репрезентація ім'я
атрибут тег ми додали на кроці 3.
Тепер можна натиснути на ділянку карти зображення лежить за кнопкою Expand. Коли користувач натискає кнопку "Розгорнути", це реальна кліка, яка натискається, - пам'ятайте, що ми зробили кнопку "Розгорнути" “прохідний” з покажчик-події: немає;
правило на кроці 2.
Таким чином користувач націлюється на зображення натиснувши на неї, і після клацання URI стає суфіксованим з "# img1"
ідентифікатор фрагмента.
5. Стиль : target
Псевдоклас
До "# img1"
Ідентифікатор фрагмента знаходиться в кінці URI, цільове зображення може бути стилі з : target
псевдоклас
Розміри цільового зображення збільшуються, відображається кнопка "Закрити", а кнопка "Розгорнути" приховується.
.img: target висота: 450px; ширина: 500px; .img: target + .close display: block; .img: target + .close + .expand display: none;
Як працює кнопка закриття
Як кнопка Закрити була додана як фонове зображення (Крок 2), і насправді є з тегом
href = #
атрибут (Крок 1), коли він натискається, він видаляє ідентифікатор фрагмента з кінця URI. Тому він також видаляє : target
псевдоклас зображення, а також зображення повертається до попереднього розміру.
Тепер виконується ефект масштабування за допомогою клавіші CSS-only on-click, ознайомтеся з демо-версією нижче або прочитайте трохи більше про теорію за графічними картами в наступному розділі.
Довідкова інформація: Чому
і ні
?
До теперішнього часу ви, безумовно, розумієте, що найважливіше для роботи з цим CSS-рішенням є націлювати на зображення за допомогою href = "# imgid"
атрибут, що також можна зробити за допомогою замість карти зображення.
Це може бути вірно, однак, коли мова йде про зображення, використовуючи елемент є більш доречним. Це ще важливіше, коли ви хочете збільшити масштаб трапляються при натисканні на більшу область на зображенні а не просто на піктограмі Expand,
надає вам просте рішення.
The за замовчуванням
значення для форми
атрибут створює a прямокутна зв'язуюча область, що охоплює все зображення. Якщо ви повинні були використовувати замість цього вам доведеться кодувати його, щоб покрити зображення, і ви можете також використовувати елемент обгортки для тієї ж мети.
Також говорити про застереження щодо цього рішення покажчик-події
Властивість CSS (ми використовували на кроці 2) підтримується Internet Explorer тільки з версії 11.
Щоб підтримувати веб-переглядачі IE, можна скористатися ними замість
, або збільште зображення, натиснувши будь-яке місце на ньому (у цьому випадку не потрібно буде використовувати значок "Розгорнути").