Как создать эффект лупы на сайте

Автор: Virginia Floyd
Дата создания: 9 Август 2021
Дата обновления: 7 Декабрь 2024
Anonim
Как добавить эффект лупы для фото | Тильда Бесплатный Конструктор для Создания Сайтов
Видео: Как добавить эффект лупы для фото | Тильда Бесплатный Конструктор для Создания Сайтов

Содержание

Предоставление посетителям вашего сайта возможности детально рассмотреть изображение требует немного манипулирования этими картинками. Добавив немного CSS, JavaScript и jQuery к композиции, вы можете создать эффект лупы, когда указатель мыши перемещается по изображению на вашей странице. Этот эффект достигается созданием небольшого окна, в котором отображается фоновое изображение, когда указатель мыши перемещается над изображением, отображаемым на переднем плане.


направления

Дайте посетителям вашего сайта "крупный план" изображения (Бренд Х Картинки / Бренд Х Картинки / Getty Images)

  1. Включите JavaScript и jQuery в раздел «head» HTML-кода с инструкциями:

    В этом примере библиотека jQuery находится в каталоге HTML по умолчанию.

  2. Вставьте тег CDATA, чтобы предотвратить попытки браузера проанализировать операторы jQuery:

  3. Установите переменные высоты и ширины, используемые для отображения изображений:

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

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


    $ (документ) .ready (function () {

    $ ("# myimage"). mouseover (function (e) {$ (document) .mousemove (myMM); $ ("# glass"). fadeIn ('fast');

    });

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

    function myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-image"); var glass = $ ("# glass"); var xs = e.pageX - myImage.offset (). left; var ys = e.pageY - myImage.offset (). top; var bx = glassImage.width () / 2 - xsW / W; var by = glassImage.height () / 2 - ysЧ / ч; glass.css ("left", e.pageX-75-89 + "px"). css ("top", e.pageY-75-10 + "px"); glassImage.css ("background-position", bx + "px" + by + "px"); if (bx <-W || by <-H || bx> 150 || by> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut («быстро»); }}


  6. Закройте «скрипт» jQuery и удалите анализатор CDATA с инструкциями:

    // ]]>

  7. Установите макет страницы с помощью CSS, чтобы расположить фоновое изображение большего размера и границы окна увеличения с кодом:

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

  8. Напишите HTML-код для отображения страницы в разделе «тело»:

    >

    Наведите курсор на изображение

чаевые

  • Этот код зависит от CSS3 для создания круглого поля увеличения и может не работать в старых браузерах. Для обратной совместимости со старыми реализациями CSS установите прямоугольное поле для «# glass-image» (увеличительное стекло).

предупреждение

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