大家复制源码自己看吧，就是通过DOM操纵元素的位置，然后用setTimeout进行循环。
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/addLoadEvent.js"></script>
<script src="js/positionMessage.js"></script>
<script src="js/moveElement.js"></script>
</head>
<body>
<p id="message">Whee!</p>
<p id="message2">Whoa!</p>
</body>
</html>
js：
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
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 true;
}
if (xpos < final_x){
xpos++
}
if (xpos > final_y){
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);
}
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",125,25,20);
if (!document.getElementById("message2")) return false;
var elem = document.getElementById("message2");
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "50px";
moveElement("message2",125,125,20);
}
addLoadEvent(positionMessage);
带注释的js代码：
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function positionMessage() { //检查浏览器支持情况，检查文档里面是否有message ID if (!document.getElementById) return false; if (!document.getElementById("message")) return false; //获取message，并设置它具体的style值 var elem = document.getElementById("message"); elem.style.position = "absolute"; elem.style.left = "50px"; elem.style.top = "100px"; //调用moveElement函数，传入参数 moveElement("message",125,25,20); //同上 if (!document.getElementById("message2")) return false; var elem = document.getElementById("message2"); elem.style.position = "absolute"; elem.style.left = "50px"; elem.style.top = "50px"; moveElement("message2",125,125,20); } addLoadEvent(positionMessage); function moveElement(elementID,final_x,final_y,interval) { //检查浏览器支持情况 if (!document.getElementById) return false; if (!document.getElementById(elementID)) return false; //取得元素ID值并赋值给elem var elem = document.getElementById(elementID); //通过parseInt函数把style值转换成number类型 var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); //判断xpos ypos是否和最终坐标相等 if (xpos == final_x && ypos == final_y){ return true; } //不相等时候，xpos ypos进行相应的自加一或自减一 if (xpos < final_x){ xpos++ } if (xpos > final_y){ xpos-- } if (ypos < final_y){ ypos++ } if (ypos > final_y){ ypos-- } //把xpos ypos赋值给elem的style.left .right，然后再加上px elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; //通过自调用实现重复执行 var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")" movement = setTimeout(repeat,interval);