list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web Design</title>
<link href="css/layout2.css" rel="stylesheet" media="screen" />
</head>
<body>
<p id="message">Wheel!</p>
<script type="text/javascript" src="scripts/addLoadEvent.js"></script>
<script type="text/javascript" src="scripts/positionMessage.js"></script>
</body>
</html>
positionMessage.js
addLoadEvent(positionMessage);
//将元素指定到某个位置
function positionMessage(){
var elem = document.getElementById('message');
elem.style.position = "relative";
elem.style.left="20px";
elem.style.top="50px";
elem.style.fontColor="red";
moveMessage("message",200,100,10)
}
//将移动元素函数抽象
function moveMessage(elementID,final_x,final_y,interval){
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 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";
var repeat = "moveMessage('"+elementID+"',"+final_x+","+final_y+","+interval+")";
movement = setTimeout(repeat,interval);
}