JavaScript DOM Programming Art: Animating effects

See the tenth chapter, according to the specifications of the book successfully wrote a dynamic position conversion.

The example of this book is simple, but what is important is the ideas contained therein.

1 functionmoveelement (elementid,finax,finay,interval)2 {3     if(!document.getelementbyid)return false;4     if(!document.getelementbyid (ElementID))return false;5     varelem=document.getElementById (elementid);6     varxpos=parseint (elem.style.left);7     varypos=parseint (elem.style.top);8     if(xpos==finax&&ypos==Finay)9     {Ten         returnture; One     } A     if(Xpos<finax) xpos++; -     if(Xpos>finax) xpos--; -     if(Ypos<finay) ypos++; the     if(Ypos>finay) ypos--; -elem.style.left=xpos+ "px"; -elem.style.top=ypos+ "px"; -     varrepeat = "moveelement ('" +elementid+ "'," +finalx+ "," +finaly+ "," +interval+ ")"; +Movement=setTimeout (repeat,interval); - } +Addloadevent (moveelement);

The above section of code is a JavaScript function segment. This function is the movement of elements.

The function parameters are: The ID of the element, the final coordinate after the move, and the duration of the move.

The behavior is first judged, if the element ID cannot be read then return FALSE. Otherwise, the initial position of the element is read. The difference between the judgment and the final position.

Then use the SetTimeout function, which is a function that allows a function to start executing after a certain period of time.

Finally, use addloadevent to ensure that this function segment is executed after the entire HTML load.

Can be used in pictures, text and other elements, the idea is the same. Just the details of the different times need to be considered.

JavaScript DOM Programming Art: Animating effects