DOM למד את

3.ב       הנפשה

הנפשה (Animation) מוגדרת כתנועה של אלמנטים במסך ובד"כ כוללת מניפולציות נוספות כגון הוספת רווחים בין אותיות ומילים ושינוי גודל טקסט. כמו בכל הדוגמאות שראינו עד כה , עליך תחילה לאתר את האובייקט שעליו ברצונך לבצע את המניפולציות. ושוב יש בידך 2 שיטות לבצע זאת – שיטת ה ID ושיטת עץ המסמך. האלמנטים object.style.top ו obj.style.left הינם המפתח ליצירת התנועה לאורך המסך. אלמנטים אלו מחזירים את המספר ואת היחידות (px,em וכו'). בדפדפנים IE4/5+ יש לנו עוד 4 תכונות נוספות : obj.style.posTop,obj.style.pixelTop ו obj.style.posLeft ,obj.style.pixelLeft.

תכונות pixelTop/pixelLeft מחזירות את המיקום העליון\שמאלי  בפיקסלים והתכונות posTop/posLeft מחזירות את המיקום העליון\שמאלי ביחידות אשר הן צויינו. לידיעתך תכונות אלו לא הפכו לסטנדרט ולכן לא נשתמש בהן כאן.

 

פונקציות שונות ורבות קיימות עבור ביצוע מניפולציות על אלמנטים ב IE/NS DOM אבל נמצא כי השימושיות ביותר הן אלו המקבלות 3 פרמטרים – את האובייקט ואת ערכי x ו y אשר יש להוסיף\להחסיר ממיקום האובייקט. שים לב כי בכדי להשתמש בפונקציות אלו על האובייקט להכיל את תכונת המיקום (באופן יחסי או אבסולוטי) וחייב להכיל קוארדינטות top ו left. אם ברצונך לשמור על האובייקט בתחומי הדף עליך להשתמש במיקום יחסי : left Opx ו top Opx. זה יאפשר להזיז את האובייקט בצורה דינאמית אך לשמור אותו בדף.  

function MoveBy(obj,x,y)
{
     if (parseInt(navigator.appVersion) >= 5 || navigator.appVersion.indexOf["MSIE 5"] != -1)
     {
         obj.style.left = parseInt(obj.style.left) + x;
         obj.style.top = parseInt(obj.style.top) + y;
     }
}

לדוגמא אם ברצוני להזיז את הדמות (IMG) עם הID "myImg" ב5 פיקסלים שמאלה אשתמש ב:  

MoveBy(document.getElementById('myImg'), -5, 0);

[ try it | stop it ]

פונקציה זו מפחיתה 5 מהמיקום השמאלי של האובייקט ולא משנה את את המיקום העליון בכלל. פונקציה זו אינה שימושית למקרים בהם אנו רוצים להזיז את האובייקט למיקום חדש במסך ואנו לא בטוחים בקשר למיקומו הנוכחי. למטרה זו נשתמש בפונקציה אחרת שנקרא לה MoveTo(). גם היא מקבלת 3 פרמטרים – האובייקט אותו רוצים להזיז , את הערך החדש של x והערך החדש של y. ישנו פרמטר רביעי אופציונאלי אשר קובע את היחידות איתן אנו עובדים. אם הוא לא מצוין אז ברירת המחדל היא px. 

function MoveTo(obj,x,y)
{
     if (parseInt(navigator.appVersion) >= 5 || navigator.appVersion.indexOf["MSIE 5"] != -1)
     {
         obj.style.position = "absolute";
         var units = (MoveTo.arguments.length > 3) ? MoveTo.arguments[3] : "px";
         obj.style.left = x + units;
         obj.style.top = y + units;
     }
}

 

ניתן להשתמש בה עבור כל אלמנט אשר ניתן להזזה בצורה יחסית \ אבסולוטית. על מנת להזיז אובייקט עליך פשוט לקרוא לפונקציה MoveTo() בתוך פונקציה הקוראת לעצמה כל כ 100 מילי-שניות. לדוגמא:  

function MoveIMG()
{
     imgOb = document.getElementById("myImg");
     MoveBy(imgOb, 1, 0);
     if (parseInt(imgOb.style.left) < 200) setTimeout("MoveIMG()", 100);
}

עליך לזכור כי מיקומי ה top וה left אינם היחידים אשר ניתן לבצע עליהם מניפולציות בעזרת ה DOM. ישנם עוד תכונות מעניינות כגון: ריווח-אותיות, ריווח-מילים,משפחת הגופן (font family) , גודל הגופן , צבע, רקע, אורך , רוחב , גבולות , שוליים , ריפוד (padding) וסגנון הגבול (border-style). ריווח-אותיות ומילים מיוצג ביחידות em, משפחת-גופן מיוצג בעזרת כל גופן חוקי , גודל-גופן מיוצג בברירת המחדל ביחידות em , צבע ורקע ע"י כל צבע חוקי , אורך ורוחב מיוצגים בברירת המחדל ביחידות px , גבול,שוליים וריפוד מקבלים ערך צבע וערך פיקסל. סגנון-גבול מקבל solid , dotted או null.

    |