            |
| פורומים | הדרכות | מגזין | שירותים | קטעי וידאו | חדשות | בלוגים |
| ||
לדף המלא כיסוי חלוןAbraham Chaffin
דף מלא חלונות קופצים כיסוי הדרכה זו תוכלו ללמוד כיצד ליצור דף מלא חלונות קופצים שכבות כי קיים html דף. טכניקה זו משמשת לעתים קרובות עבור הצגת וידאו, קובץ הסרט, תמונה, או טופס כאשר משתמש לוחץ על הרכיב דף אינטרנט.
צפה בדוגמה מבואטכניקה זו אינה חלון קופץ כמו אחת, בדרך כלל, עלול לחשוב. זה לא חלון נפרד של html דפדפן זה הוא פתח, אלא כי שכבות div הקיימת html דף. את div היא שקופה למחצה, ויוצר אפקט נחמד, המאפשרת למשתמש לדעת כי הם יכולים לחזור אל דף אחר על ידי סגירת החלון (div) כי הוא למעלה.השיטה accomplishing מאחורי זה הוא די ישר קדימה: הראשונית של המדינה div זה יהיה כיסוי הדף מוסתר ללא תוכן זה הפנימי html. כלומר, בתחילה אין דבר בין תג הפתיחה ואת div div תג הסגירה ואת רכיב יש תצוגה של אף אחד. כדי ליזום את התצוגה של div תחילה עליך לבחור ואת רכיב שמשתמש יהיה לחץ על, לרחף מעל, וכו '. כדי להקצות את אופן הפעולה. אתה אפילו יכול לקבל את זה יזם כאשר הדף נטען, אם אתה רוצה. בדרך כלל היית תמונה, לחצן, או טקסט שהמשתמש לוחץ על מנת ליזום את פונקציית JavaScript. כאשר מוצגת div על ידי JavaScript הפונקציה היא בעצם הסרת להציג ערך של כלום כדי להציג את הערך של ריק או''אשר מחזיר את ערך ברירת המחדל אלמנטים אשר שתוצג. שנית את הפנימיות של div html מלא מוגדרים מראש html קוד זה יהיה את הקוד שיש לו מה אתה רוצה להיות מוצג בתוך שכבת חלון. בדוגמה זו נצטרך וידיאו בתוך שולחן שמסייעת מרכז הוידאו במרכז המסך. שם יהיה גם על לחצן סגור כדי לסגור את החלון או חצי שקוף מוקפץ div. לחיצה על כפתור לסגור את החלון הקופץ יוזם את היפוך כאשר היא הוצגה. היא מקצה את div לתצוגה של ערך לראש כלום ואת מגדירה את הפנימיות html לראש כלום. את הקודכדי להתחיל כאן את הקוד מתחילתו ועד סופו ולאחר מכן אנחנו נלך על זה חתיכת על ידי חתיכה:מצב חמוראת שורת הקוד נדרשת בחלקו העליון של המסמך כדי לאפשר מצב חמור ב ie7. מיקום קבוע אינו נתמך ב ie7 בלי זה מיושם ו הדרכה זו לא תפעל. זכור גם כי זה עשוי שלא לפעול בכל הדפדפנים כמו מיקום קבוע הוא נכס חדש יותר CSS.CSS סגנוןבוא נלך על סגנון של CSS div ולראות מה עושה את זה חצי שקוף div שכבות כי שאר הדף:את Z-CSS לאינדקס נכס משמש כדי להעלות את השכבה ב-Z שטח מעל כל אלמנט אחר, כגון הנפתחת תפריטים, וכו '. הגדרת את זה די טוב 10000 מבטיח שאתה הולך ביותר מעל אלמנטים אחרים בעלי מוגדר Z-index. החלק הכי קשה הוא מקבל את חצי שקוף div השפעה על פני מספר רב של דפדפנים. Firefox, Internet Explorer, Safari, אופרה, ואפילו Google chrome = O לא כל הדפדפנים להשתמש באותו חצי שקוף CSS נכס בחר. כלומר, היא משתמשת הגדרות המסנן. Mozilla Firefox יש "-mox-אטימות". ואחרים להשתמש "עמימות" מה שעושה את רוב תחושת לי ואנו מקווים יהפוך הסטנדרט בעתיד. השורה הראשונה "# (displaybox"מקצה הבאות של אלמנט הסגנון עם תעודת displaybox. הבא חמש שורות אלה בדרכים שונות על מנת להפוך את אטימות מוגדר 50% " מסנן: אלפא (אטימות = 50); / * * כלומר ישנים / מסנן:Progid:Dximagetransform.microsoft.אלפא (אטימות = 50); / * Ie * / -moz-עכירה: .50; / * * ישנים Mozilla / -khtml-עכירה: 0.5; / * * ישנים Safari / עכירה: 0.5; / * נתמך על ידי Mozilla הנוכחי, Safari, * אופרה ו / " פשוט לשנות את 5, .5 או 50 ערכים, מה אתה רוצה. לדוגמה מוגדר 50% עמימות. "צבע הרקע:# 000000;"כמובן עושה את צבע הרקע שחור ואז 50% שקיפות תעשה את זה אפור. "מיקום:קבוע;"קובע את מיקום קבוע כדי לא להיות קרוב משפחה או מוחלטת את זרימת הדף. זה עושה את זה כל כך את אלמנט יכול לקפוץ החוצה ו לצוף מעל אלמנטים אחרים ולהיות קבוע של חלון ולא הדף או גורמים אחרים. מיקומה היחסי מעביר את הרכיב את הזרימה של הדף, והיא עברה ואת תנועות ואלמנטים נוספים סביבו. מוחלט floats לעיל, אך היא יחסית על הדף לא החלון, אם השתמשת אלמנט זה היה רק להישאר בחלק העליון של הדף. "מוביל:0px; שמאל:0px; רוחב:100%; גובה:100%;"מציב את חצי שקוף div בראש בפינה השמאלית ואת פורשת את זה עד כמה הוא יכול לעבור דרך החלון. "יישור טקסט:מרכז;-יישור אנכי:באמצע;"ההתחלה שלי היא לנסות את מרכז בתוכו אלמנטים של div כדי באמצע של הדף. JavaScriptעכשיו בוא תסתכל על זה הופך את JavaScript לשנות את הרכיב כאשר המשתמש אינטראקציה עם הדף JavaScript ו מבצעת את תפקידה:השורה הראשונה של הפונקציה מצהיר על שם פונקציה "פונקציה clicker () ("כדי לשמש לאורך הדף. "Var Thediv = מסמך.Getelementbyid ( 'displaybox'); " מגדיר את הערך של "Thediv" משתנה ל div עם ID של "displaybox". "Thediv" משתנה ישמש דרך שאר הפונקציה כך שהדפדפן לא צריך לקבל מחדש את אלמנט displaybox. "אם (Thediv.סגנון.התצוגה == "none") ("בעצם אומר, "אם עכשיו Thediv הוא לא יוצג לעשות את מה שאני עומד לספר לך." להפוך Thediv גלויים "Thediv.סגנון.התצוגה = "";". ירידה זו html ב Thediv "Thediv.Innerhtml = "a href='#' onclick='return clicker();' סגור חלון / a"". Inbetween שני סימני ציטוט כאן מה הייתם שמים html אתה רוצה להיות מוצג. זכור כי תצטרך עוד ציטוט [ "] תג זה יסתיים כך עליך להשתמש יחיד ציטוטים שלך html [ '] או לברוח את [ "] באמצעות אחורי [] מול כל המרכאות E.g. [ "]. אתה צריך איפשהו שם יש את היכולת לסגור את החלון שוב. אחר חכם המשתמש נתקע עם חלון הדף ולא יוכלו לחזור. "אחר) ("אם את div אז היה גלוי... "Thediv.סגנון.התצוגה = "none";"להסתיר את זה "Thediv.Innerhtml ='';"ולהגדיר את תוכן כלום. "}"אם בסופו של הצהרה אחר. "חזור שקר;"חזרה כוזבים עבור הפונקציה. זה בעצם עושה את זה כל כך כי הקישור אינו בפועל עבור אל היעד של href כאשר אתה לוחץ על זה. אם אתה משתמש בשיטה של onclick על קישור. "}"בסופו של פונקציה. ביצוע זה עובדכדי להפוך את זה באמת עובד על הדף אתה צריך לעבור את div אי שם הדף מוסתר בתחילת ו משהו על המשתמש ללחוץ על:מוסתרים displaybox div: קישור זה יהיה להפעיל ולהחזיר את הפונקציה onclick JavaScript clicker: צפה בדוגמה זה אמור לתת לך רעיון איך ליצור אפקט זה וגם נותנים לך הבנה מספיק כדי להתאים, שינוי, ו לתפעל אותו להיכנס משלך html פריסת. ליהנות! | |||||||||||||
|
פורומים • הדרכות • מגזין • שירותים • קטעי וידאו • חדשות • בלוגים © CreativeCOW.net כל הזכויות שמורות. Creative קהילות של העולם [מוביל] English • العربية • 中文 • Français • Deutsch • עברית • हिन्दी • Italiano • 日本語 • Português • Русский • Español |
