הצגת שקופיות JavaScript עם CSS

• מאי 1, 2024

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

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



ההמרה הראשונית ל- CSS הייתה קלה מכיוון שרק לתמונה הגדולה היה מידע סטיילינג וכבר היה לה מזהה תכונה ששימשה למטרות JavaScript.

#largeImage {
גבול: 2px שחור מוצק;
רוחב: 544 פיקסלים;
גובה: 408 פיקסלים;
}

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

img.thumbs {
גבול: אין;
רוחב: 40 פיקסלים;
גובה: 40 פיקסלים;
}

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

. מצגת slides {
גובה: 408 פיקסלים;
גובה מקסימלי: 408 פיקסלים;
}

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

img # הנוכחי {
גבול: 1 פיקס אדום אדום;
פילטר: אלפא (אטימות = 50);
-מאוז-אטימות: 0.5;
אטימות: 0.5;
}

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

לבסוף שיניתי את ה- HTML של התמונות הממוזערות בכדי להשתמש בסגנונות ולהתקשר לפונקציה שלי. ה- HTML למצגת השקופיות שלי נראה עכשיו כך:









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

אתה יכול לראות דוגמא עובדת לקוד עד כה כאן.

הוראות וידאו: How to use marquee tag in HTML(scrolling images and text in web page ) (מאי 2024).