Як створити ефект збільшувального скла на веб-сайті

Автор: Virginia Floyd
Дата Створення: 12 Серпень 2021
Дата Оновлення: 17 Червень 2024
Anonim
Як створити ефект збільшувального скла на веб-сайті - Статті
Як створити ефект збільшувального скла на веб-сайті - Статті

Зміст

Надання відвідувачам Вашого веб-сайту можливості детально подивитися на зображення вимагає трохи маніпулювання цими зображеннями. Додавши до композиції невеликий CSS, JavaScript і jQuery, можна створити ефект збільшувального скла, коли вказівник миші рухається над зображенням на вашій сторінці. Цей ефект досягається шляхом створення невеликого вікна, яке відображає фонове зображення, коли вказівник миші рухається над зображенням, що відображається на передньому плані.


Інструкції

Надайте відвідувачам вашого веб-сайту "крупний план" зображення (Бренд X Pictures / Бренд X Pictures / Getty Images)

  1. Включіть JavaScript і jQuery в розділ "голова" HTML-коду з інструкціями:

    У цьому прикладі бібліотека jQuery розташована у каталозі HTML за замовчуванням.

  2. Вставте тег CDATA, щоб запобігти спробам браузера розібрати оператори jQuery:

  3. Встановіть змінні висоти та ширини, які використовуються для відображення зображень:

    var W = 743; var H = 1155; var w = 192; var h = 300;

  4. Встановіть умови, за яких почнеться функція збільшення. При виклику ця функція замінює вказівник миші кільцевим переглядачем найбільшого покритого зображення, коли користувач наводить курсор миші на зображення з меншим розміром, показане на сторінці. Створіть цей примірник з кодом:


    $ (document) .ready (функція () {

    $ ("# myimage"). наведення курсору миші (функція (e) {$ (document) .mousemove (myMM); $ ("# glass"). fadeIn ('fast');

    });

  5. Встановіть функцію збільшення і параметри фіналізації. У цьому прикладі приховане зображення збільшується вдвічі більшим розміром з меншого зображення, а вікно збільшення зникає, коли вказівник миші переміщується за межі меншого зображення. Ви можете зробити це за допомогою коду:

    функція myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-image"); var glass = $ ("# glass"); var xs = e.pageX - myImage.offset (). var ys = e.pageY - myImage.offset (). var bx = glassImage.width () / 2 - xsW / w; var по = glassImage.height () / 2 - ysH / h; glass.css ("лівий", e.pageX-75-89 + "px"). css ("зверху", e.pageY-75-10 + "px"); glassImage.css ("фонове положення", bx + "px" + по + "px"); if (bx <-W || на <-H || bx> 150 || на> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ('швидкий'); }}


  6. Закрийте "скрипт" jQuery і видаліть парсер CDATA з інструкціями:

    // ]]>

  7. Встановіть макет сторінки за допомогою CSS для розміщення більшого фонового зображення, а вікно збільшення - з кодом:

    type = "text / css"> #monaimage {margin-left: 200px; } # скло {фон-повтор: без повтору; фонове положення: зверху ліворуч; ширина: 250px; висота: 170px; прокладка: 10px; padding-left: 89px; маржа: 0; позиція: абсолютна; дисплей: немає; } # glass-image {background-image: url ('myImageLarge.jpg'); ширина: 150px; висота: 150px; кордон-радіус: 75px; -moz-border-radius: 75px; фон-повтор: без повтору; background-color: #fff; маржа: 0; заповнення: 0; курсор: none; }

  8. Напишіть HTML-код для відображення сторінки в розділі "body":

    >

    Наведіть курсор миші на зображення

Як

  • Цей код залежить від CSS3, щоб створити поле круглого збільшення і може не працювати у старих браузерах. Для зворотної сумісності зі старими реалізаціями CSS встановіть прямокутне поле для "# glass-image" (збільшувального скла).

Повідомлення

  • Без тегів CDATA, браузери намагаються розібрати оператори менше "<" і більше, ніж ">" як теги HTML. Завжди залучайте оператори JavaScript і jQuery з тегами CDATA, щоб уникнути збоїв у сценарії.