javascript实现简单的动画功能
//在第二个函数positionMessage中设置初始位置与终点,新建html文件是,元素ID为message。
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload=func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
function positionMessage() {
if (!document.getElementById) {return false;}
if (!document.getElementById("message")) {return false;}
var elem = document.getElementById("message");
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "100px";
moveElement("message",200,100,10);
}
addLoadEvent(positionMessage);
function moveElement(elementID,final_x,final_y,interval){
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem=document.getElementById(elementID);
var xpos=parseInt(elem.style.left);
var ypos=parseInt(elem.style.top);
if (xpos == final_x && ypos==final_y) {
return false;
}
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";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
movement = setTimeout(repeat,interval);
}