js动画 从一个位置渐渐移动到另外一个位置 通用
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>CSS-DOM</title><linkrel="stylesheet"type="text/css"href="10.css"><scriptsrc="10.js"></script></head><body><pid="message">Whee!</p></body></html>
functionpositionMessage(){if(!document.getElementById)returnfalse;if(!document.getElementById("message"))returnfalse;varelem=document.getElementById("message");elem.style.position="absolute";elem.style.left="50px";elem.style.top="100px";moveElement("message",200,100,10);}functionmoveElement(elementID,final_x,final_y,interval){if(!document.getElementById)returnfalse;if(!document.getElementById(elementID))returnfalse;varelem=document.getElementById(elementID);varxpos=parseInt(elem.style.left);//parseInt(string)把字符串里面的数值信息提取出来,因为后面要进行很多算术比较操作。varypos=parseInt(elem.style.top);//parseFloat(string)可以把带小数的数值(也就是浮点数)提取出来。if(xpos==final_x&&ypos==final_y){returntrue;}if(xpos<final_x){xpos++;}//如果xpos小于终点的left,给它加1.if(xpos>final_x){xpos--;}//如果xpos大于终点的left,给它减1.if(ypos<final_y){ypos++;}//如果ypos小于终点的left,给它加1.if(ypos>final_y){ypos--;}//如果ypos大于终点的left,给它减1.elem.style.left=xpos+"px";elem.style.top=ypos+"px";//varrepeat=function(){moveElement(elementID,final_x,final_y,interval)}varrepeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";movement=setTimeout(repeat,interval);//clearTimeout(movement);在等待的interval那时间内,可以取消这一“跳跃”行为}addLoadEvent(positionMessage);
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。