html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<script src="js/positionMessage.js"></script>
<script src="js/addLoadEvent.js"></script>
</head>
<body>
<p id="message">move</p>
</body>
</html>
janascript代码：
1. positionMessage.js
function messagefunc()
{
if(!document.getElementById)return false;
if(!document.getElementById("message"))return false;
var elem=document.getElementById("message");
elem.style.left="500px" ;
var xpos=parseInt(elem.style.left);
var ypos=parseInt(elem.style.top);
if(xpos==200&&ypos==100){return true};
if(xpos<200){xpos++};
if(xpos>200){xpos--};
if(ypos>100){ypos--};
if(ypos<100){ypos++};
elem.style.left= xpos+"px";
elem.style.top= ypos+"px";
movement=setTimeout("messagefunc()",30);
}
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="100px";
elem.style.top="50px";
elem.style.color="red";
elem.style.fontSize="1.5em";
movement=setTimeout("messagefunc()",2000);
}
2.addLoadEvent.js
function addLoadEvent(func)
{var oldonload=window.onload;
if(typeof window.onload!='function')
{window.onload=func;}
else
{window.onload=function()
{oldonload();
func();
}
}
}
addLoadEvent(positionMessage);
相关分类