moveelement function
<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><title>Using timer to realize JS animation effect</title><style></style></Head><Body><PID= "message">where</P><PID= "Message2">whoa!</P><Script> functionPositionmessage () {varElem=document.getElementById ("message"); Elem.style.position= "Absolute"; Elem.style.left= "50px"; Elem.style.top= "100px"; Moveelement ("message", the, -, -); varElem=document.getElementById ("Message2"); Elem.style.position= "Absolute"; Elem.style.left= "50px"; Elem.style.top= "50px"; Moveelement ("Message2", the, the,Ten); //movement = SetTimeout ("Movemessage ()"; } functionmoveelement (elementid,final_x,final_y,interval) {varElem=document.getElementById (ElementID); varxpos=parseint (Elem.style.left); varypos=parseint (elem.style.top); if(xpos==final_x&&ypos==final_y) { return true; } if(xpos<final_x) {xpos++; } if(xpos>final_x) {xpos--; } if(Ypos<final_y) {ypos++; } if(Ypos>final_y) {ypos--; } elem.style.left=xpos+ "px"; Elem.style.top=ypos+ "px"; varRepeat= "moveelement ('"+ElementID+"',"+final_x+","+final_y+","+interval+")"; Movement=setTimeout (Repeat,interval); } //function Movemessage () { //var elem = document.getElementById ("message"); //elem.style.left = "200px"; // }Positionmessage (); //movemessage ();</Script></Body></HTML>
View Code
JS DOM Programming Art--using JS to achieve animation effects--JS study notes 2015-7-21 (88th day)