כיצד ליצור מארק תמונה רציף של JavaScript

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

עם זאת, לתסריט זה יש כמה מגבלות:

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

הראשון, העתק את ה- JavaScript הבא ושמור אותו כ- marquee.js.

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

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

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

var
mqAry1 = ['graphics / img0.gif', 'graphics / img1.gif', 'graphics / img2.gif', '
graphics / img3.gif ',' graphics / img4.gif ',' graphics / img5.gif ',' graphics /
img6.gif ',' graphics / img7.gif ',' graphics / img8.gif ',' graphics / img9.gif ',
'graphics / img10.gif', 'graphics / img11.gif', 'graphics / img12.gif', '
graphics / img13.gif ',' graphics / img14.gif '];

var
mqAry2 = ['graphics / img5.gif', 'graphics / img6.gif', 'graphics / img7.gif', '
graphics / img8.gif ',' graphics / img9.gif ',' graphics / img10.gif ',' graphics /
img11.gif ',' graphics / img12.gif ',' graphics / img13.gif ',' graphics / img14.
gif ',' graphics / img0.gif ',' graphics / img1.gif ',' graphics / img2.gif ','
graphics / img3.gif ',' graphics / img4.gif '];

הפעלת פונקציה () {
mq חדש ('m1', mqAry1,60);
mq חדש ('m2', mqAry2,60); // חזור על כמה שדות דלק כנדרש
mqRotate (mqr); // חייב לבוא אחרון
}
windows.onload = התחל;

// Marquee Image רציף
// זכויות יוצרים 24 ביולי 2008 מאת סטיבן צ'פמן
// http://javascript.about.com
// ניתנת הרשאה לשימוש ב- Javascript זה בדף האינטרנט שלך
// בתנאי שכל הקוד להלן בסקריפט זה (כולל אלה
// הערות) משמש ללא כל שינוי

var
mqr = []; פונקציה
mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit =
this.mqo.style.height; this.mqo.onmouseout = פונקציה ()
{mqRotate (mqr);}; this.mqo.onmouseover = פונקציה ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length;
עבור (var
i = 0; ithis.mqo.ary [i] .src = ary [i]; this.mqo.ary [i] .style.position =
'מוחלט'; this.mqo.ary [i] .style.left = (wid * i) + 'px';
this.mqo.ary [i] .style.width = wid + 'px'; this.mqo.ary [i] .style.height =
היל; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
פונקציה mqRotate (mqr) {אם (! mqr) להחזיר; עבור (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; עבור (var i = 0; imqr [j] .ary [i] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mqr [j] .ary [0] .style; אם (parseInt (y.left, 10) + parseInt (y.width, 10) <0)
{var z = mqr [j] .ary.shift (); z.style.left = (parseInt (z.style.left) +
parseInt (z.style.width) * מקסימום) + 'px'; mqr [j] .ary.push (z);}}
mqr [0] .TO = setTimeout ('mqRotate (mqr)', 10);}

לאחר מכן, הוסף את הקוד הבא לקטע הראש בדף שלך:

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

להלן הקוד בו השתמשנו לאלה שבדף לדוגמא:

. marquee {עמדה: קרובת משפחה;
הצפת: מוסתר;
רוחב: 500 פיקסלים;
גובה: 60 פיקסלים;
גבול: 1px שחור מוצק;
}

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

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

השלב הבא הוא להגדיר חלוקה בדף האינטרנט שלך שם תציב את מרחב התמונות.

הראשונים מהדוגמאות הראשונות השתמשו בקוד זה:

הכיתה משייכת זאת לקוד גיליון הסגנונות בעוד שהמזהה הוא מה שנשתמש בשיחת ה- mq () החדשה כדי לצרף את מרחב התמונות.

הדבר האחרון לעשות כדי להרכיב את כל זה הוא לוודא שהקוד שלך להוסיף את האובייקט mq ב- JavaScript שלך לאחר טעינת העמוד מכיל את הערכים הנכונים.

הנה איך נראית אחת מההצהרות בדוגמה:

mq חדש ('m1', mqAry1,60);

• ה- m1 הוא המזהה של תג ה- div שלנו שיציג את המסדרון.
• mqAry1 הוא הפניה למערך תמונות שיוצגו בסולם המסך.
• הערך הסופי 60 הוא רוחב התמונות שלנו (התמונות יגללו מימין לשמאל וכך הגובה זהה לזה שהגדרנו בגיליון הסגנון).

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

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

ראשית, שנה את מערך התמונה שלך ממערך תמונות למערך מערכים שבהם כל אחד מהמערכים הפנימיים מורכב מתמונה במיקום 0 וכתובת הקישור במיקום 1.

var mqAry1 = [
['graphics / img0.gif', 'blcmarquee1.htm'],
['graphics / img1.gif', 'blclockm1.htm'], ...
['graphics / img14.gif', 'bltypewriter.htm']];

הדבר השני לעשות הוא להחליף את הדברים הבאים עבור החלק העיקרי של התסריט:

// מרקם תמונות רציף עם קישורים
// זכויות יוצרים 21 בספטמבר 2008 על ידי סטיבן צ'פמן
// http://javascript.about.com
// ניתנת הרשאה לשימוש ב- Javascript זה בדף האינטרנט שלך
// בתנאי שכל הקוד להלן בסקריפט זה (כולל אלה
// הערות) משמש ללא כל שינוי
var mqr = []; פונקציה mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit = this.mqo.style.height; this.mqo.onmouseout = פונקציה () {mqRotate (mqr);}; this.mqo.onmouseover = פונקציה () {clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length; עבור (var i = 0; i -1; j--) {maxa = mqr [j] .ary.length; עבור (var i = 0; i

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