כיצד ליצור טהור CSS onClick תמונה זום אפקט

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

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

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

ניתן לראות את התוצאה הסופית להלן - פתרון CSS בלבד התמונה זום על לחץ - -.

מתי להשתמש בפתרון CSS בלבד

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

למשך ראוי גלריה, JavaScript מספק גמישות ויעילות רבה יותר.

חזית טכניקות נשתמש

עכשיו, לאחר שהוזהרתם, בואו נסתכל במהירות על 3 טכניקות מפתח אנו נשתמש ב:

1. ה תג HTML המאפשר דפדפנים ליצור אזורים linkable מעל התמונה. קרא עוד על רכיב בפוסט הקודם שלי.
2. ה מפת האתר תכונה של תג, כי hooks את התמונה למפת התמונה.
3. ה : יעד CSS פסאודו בכיתה המייצג אלמנט שהוגדר באמצעות בורר הזיהוי שלו.

1. צור את בסיס ה- HTML

ראשית, בואו ליצור את בסיס ה- HTML. בקוד הבא, אנו מוסיפים תמונה להתקרב ולהתרחבות & סגור את הסמלים עבור התקרבות פנימה והחוצה.

חשוב שיהיה לך מזהה על התמונה כדי להיות zoomed, ואת לחצן סגור צריך להיות קישור שיש לו את href = "#" תכונה, אני אסביר מדוע מאוחר יותר את ההודעה.

2. הוסף את CSS

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

ה מצביע אירועים: אף אחד; הכלל מאפשר אירועים העכבר לעבור דרך הסמל Expand ו להגיע לתמונה.

 .img גובה: 150px; רוחב: 200px; . סגור background-image: url ("Close-icon.png"); רקע-לחזור: לא לחזור; בתחתית: 418 פיקסלים; אל תציג דבר; גובה: 32px; משמאל: 462px; margin-top: -32px; מקומות קרובים רוחב: 32px;  .expand bottom: 125px; margin-left: -32px; margin-right: 16px; מצביע אירועים: אף אחד; מקומות קרובים  

.3 הוסף את מפת התמונות

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

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

1. את הקצה השמאלי של התמונה ואת הקצה השמאלי של אזור הקישור
2. את הקצה העליון של התמונה & הקצה העליון של אזור הקישור
3. את הקצה השמאלי של התמונה ואת הקצה הימני של אזור הקישור
4. את הקצה העליון של התמונה & הקצה התחתון של אזור הקישור

הערך של href התכונה חייבת להיות מזהה hash של התמונה (זו הסיבה התמונה צריכה להיות id).

4. צרף את התמונה למפת התמונות

תוסיף את ה מפת האתר תכונה לתמונה כך לקשור אותו למפת התמונה. הערך שלה צריך להיות ייצוג hash של שם תכונה של תג הוספנו בשלב 3.

האזור הלחיצה של מפת התמונה כעת טמון מאחורי כפתור Expand. כאשר המשתמש לוחץ על לחצן Expand, זהו האזור הלחיצה שנלחץ במציאות - זכור שביצענו את הלחצן הרחב “סביר” עם ה מצביע אירועים: אף אחד; כלל בשלב 2.

בדרך זו המשתמש מטרות התמונה עצמה על ידי לחיצה על זה, ולאחר לחיצה על URI מקבל סומנו עם "# img1" מזהה קטע.

5. הסגנון : יעד פסאודו-קלאס

עד ה "# img1" מזהה קטע הוא בסוף URI, התמונה יכולה להיות ממוקדת מעוצב עם : יעד פסאודו

הממדים של הגדלת התמונה הממוקדת, לחצן 'סגור' מוצג, והלחצן 'הרחב' מוסתר.

 .img: target height: 450px; width: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  

כיצד פועל לחצן סגירה

כאשר לחצן Close נוסף כתמונת רקע (שלב 2), והוא למעשה התג עם href = # (שלב 1), כאשר לוחצים עליו, הוא מסיר את מזהה הקטע מסוף ה- URI. לכן זה גם מסיר את : יעד פסאודו מהתמונה, מהתמונה חוזר לגודלו הקודם.

רקע מידע: למה ולא ?

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

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

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