Како да направите лупу са ванилла ЈаваСцрипт-ом

Ако сте икада прегледали веб локацију за куповину, вероватно сте наишли на функцију лупе. Омогућава вам да зумирате одређени део слике за ближи приказ. Укључивање ове мале, али утицајне функције може у великој мери побољшати корисничко искуство на вашој веб локацији.

Изградња лупе слике на неприметан и кохезиван начин може бити изазов. Али пролазак кроз ове кораке ће вам помоћи да направите сопствену лупу од нуле, без потребе да се ослањате на додатке треће стране.

Када користити лупу у свом веб пројекту

Лупа може бити од користи када градите пројекат са пуно слика. Као што је раније поменуто, лупе за слике су веома популарне на веб локацијама за куповину јер понекад корисник може морати да боље погледа производ пре него што одлучи да ли га вреди купити.

Купци се ослањају искључиво на информације и визуелне приказе које пружа веб локација да би проценили квалитет, карактеристике и изглед производа. Међутим, статичне слике саме по себи не морају увек пружити довољно јасноће или омогућити свеобухватну процену ставке.

У традиционалним продавницама, купци могу физички да рукују производима, пажљиво их прегледају и процене њихову прикладност пре куповине. Увећавачи слика покушавају да поново креирају ово искуство нудећи корисницима сличан ниво контроле и испитивања виртуелно.

Лупа такође може бити од користи ако сте прављење апликације за галерију фотографија пошто је зумирање одређеног дела слике важна карактеристика.

Прављење лупе слике

Код који се користи у овом пројекту доступан је у а ГитХуб спремиште и бесплатан је за коришћење под МИТ лиценцом.

Направите фасциклу и у ту фасциклу додајте ан индек.хтмл фајл, стиле.цсс фајл и маин.јс фајл. Додајте овај шаблонски код у индек.хтмл:

хтмл>
<хтмлланг="ен">
<глава>
<метацхарсет="УТФ-8" />
<метаиме="виевпорт"садржаја="видтх=девице-видтх, инитиал-сцале=1.0" />
<наслов>Имаге Магнифиернаслов>
<линкрел="стилесхеет"хреф="стиле.цсс" />
глава>
<тело>
тело>
хтмл>

Унутар тело таг, креирајте див елемент са именом класе "хеадер". Затим у див „хеадер“ додајте ан х1 елемент заглавља за приказ наслова повећала слике.

Текст можете прилагодити својим потребама. Затим укључите два елемента распона који пружају упутства за коришћење лупе и приказују кориснику тренутни ниво зумирања.

Након одељка заглавља, креирајте а див елемент са именом класе „контејнер“. Унутар овог дива додајте још један див елемент са именом класе „магнифиер“ и примените класу „хидден“ да бисте је сакрили од погледа.

Овај елемент ће представљати слику лупе. Затим додајте ознаку скрипте са атрибутом „срц“ постављеним на „/маин.јс“.

<тело>
<дивкласа="заглавље">
<х1>Имаге Магнифиерх1>
<спан>Притисните <јака>Арров Упјака> или <јака>Арров Довнјака> до
 повећати или смањити ниво зума.спан>
<спан>Ниво зумирања: <јакакласа="ниво зумирања">1јака>спан>
див>
<дивкласа="контејнер">
<дивкласа="лупа скривена">див>
див>
<скриптасрц="/маин.јс">скрипта>
тело>

Замените код у стиле.цсс фајл са следећим. Такође можете користити а ЦСС претпроцесор попут Лесс ако желиш:

:корен {
--магнифиер-видтх: 150;
--магнифиер-хеигхт: 150;
}
тело {
приказ: флек;
флек-дирецтион: колона;
алигн-итемс: центар;
}
.контејнер {
ширина: 400пк;
висина: 300пк;
величина позадине: поклопац;
позадинска слика: урл("хттпс://цдн.пикабаи.цом/фото/2019/03/27/15/24/животиња-4085255_1280.јпг");
бацкгроунд-репеат: без понављања;
положај: релативан;
курсор: ниједан;
}
.лупа {
граница-радијус: 400пк;
кутија-сенка: 0пк 11пк 8пк 0пк#0000008а;
положај: апсолутни;
ширина: цалц(вар(--магнифиер-видтх) * 1пк);
висина: цалц(вар(--магнифиер-хеигхт) * 1пк);
курсор: ниједан;
позадинска слика: урл("хттпс://цдн.пикабаи.цом/фото/2019/03/27/15/24/животиња-4085255_1280.јпг");
бацкгроунд-репеат: без понављања;
}
спан {
приказ: блокирати;
}
.хеадер {
приказ: флек;
флек-дирецтион: колона;
алигн-итемс: центар;
}
.сакривен {
видљивост: сакривен;
}
див > спан:нтх-цхилд (3) {
фонт-сизе: 20пк;
}

У маин.јс датотеку, преузмите ХТМЛ елементе са именима класа, "лупом" и "контејнером" користећи доцумент.куериСелецтор метод и додели их променљивим лупа и контејнер, редом.

Затим, користећи гетЦомпутедСтиле функција преузимања ширина и висина елемента лупе, а затим издвојити нумеричке вредности из враћених стрингова користећи подниз и индекс методе.

Доделите екстраховану ширину променљивој магнифиерВидтх, а извучена висина до магнифиерХеигхт.

дозволити лупа = документ.куериСелецтор(".лупа");
дозволити контејнер = документ.куериСелецтор(".контејнер");
дозволити магнифиерВидтх = гетЦомпутедСтиле (лупа).видтх.субстринг(
0,
 гетЦомпутедСтиле (лупа).видтх.индекОф("п")
);
дозволити магнифиерХеигхт = гетЦомпутедСтиле (лупа).видтх.субстринг(
0,
 гетЦомпутедСтиле (лупа).хеигхт.индекОф("п")
);

Затим подесите варијабле за ниво зумирања, максимални ниво зумирања и позиције курсора и слике лупе.

дозволити зоомЛевелЛабел = документ.куериСелецтор(".зоом-левел");
дозволити зум = 2;
дозволити макЗоомЛевел = 5;
дозволити поинтерКс;
дозволити поинтерИ;
дозволити магнифиКс;
дозволити магнифиИ;

У блоку кода изнад, поинтерКс и поинтерИ оба представљају положај курсора дуж Кс и И осе.

Сада дефинишите две помоћне функције: гетЗоомЛевел који враћа тренутни ниво зумирања, и гетПоинтерПоситион који враћа објекат са Икс и и координате курсора.

функцијагетЗоомЛевел() {
повратак зоом;
}
функцијагетПоинтерПоситион() {
повратак { Икс: поинтерКс, и: показивачИ }
}

Затим креирајте адд ан упдатеМагИмаге функција која креира нови објекат МоусеЕвент са тренутном позицијом курсора и шаље га елементу контејнера. Ова функција је одговорна за ажурирање слике лупе.

функцијаупдатеМагИмаге() {
дозволити евт = Нова МоусеЕвент("моусемове", {
 цлиентКс: гетПоинтерПоситион().к,
 цлиентИ: гетПоинтерПоситион().и,
 мехурићи: истина,
 може се отказати: истина,
 поглед: прозор,
 });
 цонтаинер.диспатцхЕвент (евт);
}

Сада би требало да додате слушалац догађаја на објекат прозора за догађај "кеиуп" који прилагођава ниво зумирања када корисник притисне тастере "АрровУп" или "АрровДовн".

Функција повратног позива на догађају "кеиуп" је такође одговорна за ажурирање ознаке нивоа зумирања и покретање упдатеМагИмаге функција.

прозор.аддЕвентЛистенер("кључи", (е) => {
ако (е.кључ „стрелица горе“ && макЗоомЛевел - Број(зоомЛевелЛабел.тектЦонтент) !== 0) {
 зоомЛевелЛабел.тектЦонтент = +зоомЛевелЛабел.тектЦонтент + 1;
 зум = зум + 0.3;
 упдатеМагИмаге();
 }
ако (е.кључ "стрелица доле" && !(зоомЛевелЛабел.тектЦонтент <= 1)) {
 зоомЛевелЛабел.тектЦонтент = +зоомЛевелЛабел.тектЦонтент - 1;
 зум = зум - 0.3;
 упдатеМагИмаге();
 }
});

Затим додајте слушалац догађаја елементу контејнера за догађај „моусемове“.

​​​​​​

У функцију повратног позива додајте функционалност која уклања „скривену“ класу из елемента лупе у учини га видљивим и израчунава позицију миша у односу на контејнер, узимајући у обзир померање странице рачун.

Ова функција такође треба да подеси стил трансформације лупе на израчунату позицију, и одредите величину позадине и положај слике лупе на основу нивоа зумирања и миша положај.

цонтаинер.аддЕвентЛистенер("моусемове", (е) => {
 магнифиер.цлассЛист.ремове("сакривен");
дозволити рецт = цонтаинер.гетБоундингЦлиентРецт();
дозволити к = е.пагеКс - рецт.лефт;
дозволити и = е.пагеИ - рецт.топ;
 к = к - прозор.сцроллКс;
 и = и - прозор.сцроллИ;
 лупа.стиле.трансформ = `преведи(${к}пк, ${и}пк)`;
конст имгВидтх = 400;
конст имгХеигхт = 300;
 магнифиер.стиле.бацкгроундСизе =
 имгВидтх * гетЗоомЛевел() + "пк" + имгХеигхт * гетЗоомЛевел() + "пк";
 магнифиКс = к * гетЗоомЛевел() + 15;
 магнифиИ = и * гетЗоомЛевел() + 15;
 магнифиер.стиле.бацкгроундПоситион = -магнифиКс + "пк" + -магнифиИ + "пк";
});

Затим додајте још један слушалац догађаја елементу контејнера, али овог пута слушалац догађаја треба да слуша „моусеоут“ догађај и додајте „скривену“ класу назад елементу лупе кад год је миш ван контејнера области.

цонтаинер.аддЕвентЛистенер("моусеоут", () => {
 магнифиер.цлассЛист.адд("сакривен");
});

На крају, додајте слушалац догађаја у објекат прозора за догађај „моусемове“ који ажурира к и и позиције курсора.

прозор.аддЕвентЛистенер("моусемове", (е) => {
 поинтерКс = е.цлиентКс;
 показивачИ = е.цлиентИ;
});

То је то! Успели сте да направите лупу са ванилла ЈаваСцрипт-ом.

Како лупе побољшавају корисничко искуство

Омогућујући корисницима да зумирају одређене области слике, лупа им омогућава да јасније прегледају детаље производа.

Овај побољшани ниво визуелног истраживања улива поверење корисницима јер могу да доносе одлуке на основу информација. Ово може допринети повећању стопе конверзије и бољем задржавању купаца.