כיצד לבנות זכוכית מגדלת עם וניל JavaScript

אם גלשתם פעם באתר קניות, כנראה שנתקלתם בתכונת הגדלת התמונה. זה מאפשר לך להתקרב לחלק מסוים בתמונה לצפייה מקרוב יותר. שילוב התכונה הקטנה אך המשפיעה הזו יכולה לשפר מאוד את חווית המשתמש באתר האינטרנט שלך.

בניית מגדיל תמונה בצורה חלקה ומגובשת יכולה להיות אתגר. אבל מעבר על השלבים האלה יעזור לך ליצור מגדלת תמונה משלך מאפס, ללא צורך להסתמך על תוספים של צד שלישי.

מתי להשתמש במגדיל תמונה בפרויקט האינטרנט שלך

זכוכית מגדלת תמונה יכולה להיות שימושית כאשר אתה בונה פרויקט עם הרבה תמונות. כפי שצוין קודם לכן, מגדילי תמונה פופולריים מאוד באתרי קניות מכיוון שלפעמים המשתמש עשוי להידרש לבחון מקרוב את המוצר לפני שהוא מחליט אם כדאי לקנות אותו.

לקוחות מסתמכים אך ורק על המידע והוויזואליה המסופקים על ידי האתר כדי להעריך את האיכות, התכונות והמראה של המוצר. עם זאת, תמונות סטטיות לבדן עשויות לא תמיד לספק בהירות מספקת או לאפשר הערכה מקיפה של הפריט.

בחנויות מסורתיות, לקוחות יכולים לטפל פיזית במוצרים, לבחון אותם מקרוב ולהעריך את התאמתם לפני הקנייה. מגדלת תמונה מנסים ליצור מחדש את החוויה הזו על ידי מתן רמה דומה של בדיקה ובדיקה למשתמשים באופן וירטואלי.

גם מגדלת תמונה יכולה להיות שימושית אם אתה בניית אפליקציית גלריית תמונות שכן התקרבות לחלק מסוים בתמונה היא תכונה חשובה.

בניית מגדיל התמונה

הקוד המשמש בפרויקט זה זמין ב-a מאגר GitHub והוא בחינם עבורך לשימוש תחת רישיון MIT.

צור תיקיה ובתיקיה זו הוסף קובץ index.html קוֹבֶץ, style.css קובץ ו main.js קוֹבֶץ. הוסף את קוד ה-boilerplate הזה ל-index.html:

html>
<htmllang="he">
<רֹאשׁ>
<מטאערכת תווים="UTF-8" />
<מטאשֵׁם="נקודת מבט"תוֹכֶן="width=device-width, initial-scale=1.0" />
<כותרת>זכוכית מגדלת תמונהכותרת>
<קישורrel="גיליון סגנונות"href="style.css" />
רֹאשׁ>
<גוּף>
גוּף>
html>

בתוך ה גוּף תג, צור רכיב div עם שם המחלקה "header". לאחר מכן ב-div "header", הוסף an h1 רכיב כותרת כדי להציג את הכותרת של מגדיל התמונה שלך.

אתה יכול להתאים אישית את הטקסט כך שיתאים לצרכים שלך. לאחר מכן, כלול שני רכיבי טווח המספקים הוראות לשימוש במגדיל ומציגים את רמת הזום הנוכחית למשתמש.

לאחר קטע הכותרת, צור א div רכיב עם שם המחלקה "מיכל". בתוך ה-div הזה, הוסף רכיב div נוסף עם שם המחלקה "magnifier" והחל את המחלקה "מוסתר" כדי להסתיר אותו מהעין.

אלמנט זה ייצג את תמונת ההגדלה. לאחר מכן, הוסף תג סקריפט עם התכונה "src" מוגדרת ל-"/main.js".

<גוּף>
<divמעמד="כּוֹתֶרֶת">
<h1>זכוכית מגדלת תמונהh1>
<לְהַקִיף>ללחוץ <חָזָק>חץ למעלהחָזָק> אוֹ <חָזָק>חץ למטהחָזָק> ל
 להגדיל או להקטין את רמת הזום.לְהַקִיף>
<לְהַקִיף>רמת הזום: <חָזָקמעמד="רמת הזום">1חָזָק>לְהַקִיף>
div>
<divמעמד="מְכוֹלָה">
<divמעמד="זכוכית מגדלת מוסתרת">div>
div>
<תַסרִיטsrc="/main.js">תַסרִיט>
גוּף>

החלף את הקוד ב- style.css קובץ עם הדברים הבאים. אתה יכול גם להשתמש ב-a מעבד קדם CSS כמו Less אם אתה רוצה:

:שורש {
--רוחב זכוכית מגדלת: 150;
--זכוכית מגדלת-גובה: 150;
}
גוּף {
לְהַצִיג: לְהַגמִישׁ;
כיוון הגמיש: טור;
align-items: מֶרְכָּז;
}
.מְכוֹלָה {
רוֹחַב: 400פיקסלים;
גוֹבַה: 300פיקסלים;
גודל רקע: כיסוי;
תמונת רקע: כתובת אתר("https://cdn.pixabay.com/תמונה/2019/03/27/15/24/animal-4085255_1280.jpg");
רקע-חזרה: ללא חזרה;
עמדה: קרוב משפחה;
סַמָן: אף אחד;
}
.magnifier {
רדיוס הגבול: 400פיקסלים;
צל קופסא: 0פיקסלים 11פיקסלים 8פיקסלים 0פיקסלים#0000008a;
עמדה: מוּחלָט;
רוֹחַב: calc(var(--רוחב זכוכית מגדלת) * 1פיקסלים);
גוֹבַה: calc(var(--זכוכית מגדלת-גובה) * 1פיקסלים);
סַמָן: אף אחד;
תמונת רקע: כתובת אתר("https://cdn.pixabay.com/תמונה/2019/03/27/15/24/animal-4085255_1280.jpg");
רקע-חזרה: ללא חזרה;
}
לְהַקִיף {
לְהַצִיג: לַחסוֹם;
}
.כּוֹתֶרֶת {
לְהַצִיג: לְהַגמִישׁ;
כיוון הגמיש: טור;
align-items: מֶרְכָּז;
}
.מוּסתָר {
רְאוּת: מוּסתָר;
}
div > לְהַקִיף:ילד ראשון (3) {
גודל גופן: 20פיקסלים;
}

בתוך ה main.js קובץ, אחזר את רכיבי ה-HTML עם שמות המחלקות, "זכוכית מגדלת" ו-"מיכל" באמצעות document.querySelector שיטה ולהקצות אותם למשתנים זכוכית מגדלת ו מְכוֹלָה, בהתאמה.

לאחר מכן, באמצעות getComputedStyle פונקציה לאחזר את רוֹחַב ו גוֹבַה של אלמנט המגדלת ולאחר מכן לחלץ את הערכים המספריים מהמחרוזות המוחזרות באמצעות ה- מחרוזת משנה ו אינדקס של שיטות.

הקצה את הרוחב שחולץ למשתנה magnifierWidth, והגובה שחולץ ל magnifierHeight.

לתת זכוכית מגדלת = מסמך.querySelector(".magnifier");
לתת מיכל = מסמך.querySelector(".מְכוֹלָה");
לתת magnifierWidth = getComputedStyle (magnifier).width.substring(
0,
 getComputedStyle (magnifier).width.indexOf("פ")
);
לתת magnifierHeight = getComputedStyle (magnifier).width.substring(
0,
 getComputedStyle (magnifier).height.indexOf("פ")
);

לאחר מכן, הגדר את המשתנים עבור רמת הזום, רמת הזום המקסימלית ומיקומם של תמונת הסמן והזכוכית המגדלת.

לתת zoomLevelLabel = מסמך.querySelector(".רמת הזום");
לתת זום = 2;
לתת maxZoomLevel = 5;
לתת pointerX;
לתת pointerY;
לתת magnifyX;
לתת magnifyY;

בגוש הקוד למעלה, pointerX ו pointerY שניהם מייצגים את מיקום הסמן לאורך ציר X ו-Y.

כעת, הגדר שתי פונקציות עוזר: getZoomLevel אשר מחזירה את רמת הזום הנוכחית, ו getPointerPosition שמחזיר אובייקט עם ה איקס ו y קואורדינטות של הסמן.

פוּנקצִיָהgetZoomLevel() {
לַחֲזוֹר תקריב;
}
פוּנקצִיָהgetPointerPosition() {
לַחֲזוֹר { איקס: pointerX, y: pointerY }
}

לאחר מכן, צור הוסף updateMagImage פונקציה שיוצרת אובייקט MouseEvent חדש עם מיקום הסמן הנוכחי ושולחת אותו לרכיב המיכל. פונקציה זו אחראית לעדכון תמונת ההגדלה.

פוּנקצִיָהupdateMagImage() {
לתת evt = חָדָשׁ MouseEvent("הזז עכבר", {
 clientX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 בועות: נָכוֹן,
 ניתן לביטול: נָכוֹן,
 נוף: חַלוֹן,
 });
 container.dispatchEvent (evt);
}

עכשיו, כדאי להוסיף מאזין אירועים לאובייקט החלון עבור אירוע ה-"keyup" שמתאים את רמת הזום כאשר המשתמש לוחץ על מקשי "ArrowUp" או "ArrowDown".

פונקציית ה-callback באירוע "keyup" אחראית גם על עדכון תווית רמת הזום והפעלת updateMagImage פוּנקצִיָה.

חַלוֹן.addEventListener("מפתח למעלה", (ה) => {
אם (e.key "חץ למעלה" &&maxZoomLevel - מספר(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 זום = זום + 0.3;
 updateMagImage();
 }
אם (e.key "חץ למטה" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 זום = זום - 0.3;
 updateMagImage();
 }
});

לאחר מכן הוסף מאזין אירועים לרכיב המכיל עבור האירוע "mousemove".

​​​​​​

בפונקציית ה-callback, הוסף את הפונקציונליות שמסירה את המחלקה "המוסתר" מאלמנט המגדלת אל להפוך אותו לגלוי ולחשב את מיקום העכבר ביחס למיכל, תוך גלילה של עמוד חֶשְׁבּוֹן.

פונקציה זו צריכה גם להגדיר את סגנון ההמרה של הזכוכית המגדלת למיקום המחושב, ו קבע את גודל הרקע והמיקום של תמונת ההגדלה על סמך רמת הזום והעכבר עמדה.

container.addEventListener("הזז עכבר", (ה) => {
 magnifier.classList.remove("מוּסתָר");
לתת rect = container.getBoundingClientRect();
לתת x = e.pageX - rect.left;
לתת y = e.pageY - rect.top;
 x = x - חַלוֹן.scrollX;
 y = y - חַלוֹן.scrollY;
 magnifier.style.transform = `תרגם(${x}px, ${y}px)`;
const imgWidth = 400;
const imgHeight = 300;
 magnifier.style.backgroundSize =
 imgWidth * getZoomLevel() + "px" + imgHeight * getZoomLevel() + "px";
 magnifyX = x * getZoomLevel() + 15;
 magnifyY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -magnifyY + "px";
});

לאחר מכן הוסף מאזין אירועים נוסף לרכיב המכולה, אך הפעם המאזין לאירועים צריך להקשיב ל- אירוע "mouseout" והוסף את המחלקה "hidden" בחזרה לאלמנט המגדלת בכל פעם שהעכבר מחוץ למכולה אֵזוֹר.

container.addEventListener("יציאה מהעכבר", () => {
 magnifier.classList.add("מוּסתָר");
});

לבסוף, הוסף מאזין אירועים לאובייקט החלון עבור אירוע "mousemove" שמעדכן את מיקומי ה-x וה-y של הסמן.

חַלוֹן.addEventListener("הזז עכבר", (ה) => {
 pointerX = e.clientX;
 pointerY = e.clientY;
});

זהו זה! הצלחתם לבנות מגדיל תמונה עם וניל JavaScript.

כיצד מגדלי תמונה משפרים את חווית המשתמש

על ידי מתן אפשרות למשתמשים להתמקד באזורים ספציפיים בתמונה, זכוכית מגדלת מאפשרת להם לבחון את פרטי המוצר בבהירות רבה יותר.

רמה מוגברת זו של חקר חזותי משרה אמון במשתמשים מכיוון שהם יכולים לקבל החלטות מושכלות. זה יכול לתרום להגדלת שיעורי ההמרה ולשימור לקוחות משופר.