Как да създадете ефект на лупа на уебсайт

Съдържание

• инструкции
• съвети
• предупредителен

Предоставянето на посетители на уебсайта ви възможност да разгледат подробно изображението изисква манипулиране на тези снимки. Добавяйки малко малко CSS, JavaScript и jQuery към композицията, можете да създадете ефекта на лупа, докато курсорът на мишката се движи върху изображението на вашата страница. Този ефект се постига чрез създаване на малък прозорец, който показва фоновото изображение, когато курсорът на мишката се движи върху изображението, показвано на преден план.

инструкции

Дайте на посетителите на уебсайта си "близък план" на изображението (Марка X Снимки / Марка X Снимки / 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. Задайте условията, които започват функцията за увеличение. Когато се извика, тази функция замества показалеца на мишката с кръглия преглед на най-голямото покрито изображение, когато потребителят задържа курсора на мишката върху по-малкото изображение, показано на страницата. Създайте този екземпляр с кода:

   
   

   $ (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; стъкло.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; подложка-ляво: 89 пиксела; марж: 0; позиция: абсолютна; дисплей: няма; } # glass-image {background-image: url ('myImageLarge.jpg'); ширина: 150px; височина: 150px; граничен радиус: 75 пиксела; -moz-border-radius: 75px; фон-повторение: не се повтаря; фонов цвят: #fff; марж: 0; пълнеж: 0; курсор: няма; }

8. Напишете HTML кода, за да се покаже страницата в секцията "тяло":

   >

   Преместете мишката върху изображението

   

съвети

• Този код зависи от CSS3 за създаване на поле за увеличаване на кръг и може да не работи в по-стари браузъри. За обратна съвместимост с по-старите реализации на CSS, задайте правоъгълно поле за "# glass-image" (лупа).

предупредителен

• Без CDATA тагове, браузърите се опитват да анализират оператори, по-малки от "<" и по-големи от ">" като HTML тагове. Винаги включвайте JavaScript и jQuery операторите с етикетите CDATA, за да избегнете "скриптови" неуспехи.