Домашня » Кодування » Як створити чистий ефект CSS onClick Image Zoom

    Як створити чистий ефект CSS onClick Image Zoom

    У CSS немає псевдокласа події кліків націлювання, і це є одним з найбільші болючі точки розробників інтерфейсу. Найближчим псевдо-класом є : active який стилює елемент за період часу, коли користувач натискає на нього мишкою.

    Проте цей ефект недовговічний: коли користувач відпускає мишу, : active більше не працює. Ми повинні знайти інший спосіб емулювати подію кліків у CSS.

    Цей пост був написаний у відповідь на запит читача, і він буде пояснювати, як це зробити націлюйте подію кліку на чистий CSS у конкретному випадку використання, масштабування зображення.

    Ви можете побачити кінцевий результат нижче - рішення для CSS Збільшення зображення на клік.

    Коли потрібно використовувати рішення лише для CSS

    Перш ніж продовжувати, я хочу сказати, що для масштабування зображення рекомендую використовувати лише метод CSS (який змінює розміри зображення), лише коли потрібно одномісний або a група з декількох зображень щоб мати функцію масштабування.

    Для власне Галерея, JavaScript забезпечує більшу гнучкість і ефективність.

    Передні кінцеві методи ми будемо використовувати

    Тепер, коли ви були попереджені, давайте швидко переглянемо 3 ключові методи ми будемо використовувати:

    1. The Тег HTML що дозволяє браузерам створювати зв'язані області над зображенням. Докладніше про елемент у моїй попередній публікації.
    2. The usemap атрибут тег, що підключає зображення до карти зображення.
    3. 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 значення, і чотири значення з шнури атрибут представляють відстань у пікселях між:

    1. лівий край зображення & лівий край області посилання
    2. верхній край зображення & верхній край області посилання
    3. лівий край зображення & правий край області зв'язку
    4. верхній край зображення & нижній край області зв'язку

    Значення 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, можна скористатися ними замість , або збільште зображення, натиснувши будь-яке місце на ньому (у цьому випадку не потрібно буде використовувати значок "Розгорнути").