先上代码
//<!DOCTYPE html>
<html>
<head>
<title>小太阳</title>
<script type="text/javascript">
<!--
directionX=1;//x轴的方向
directionY=1;//y轴的方向
sunX=0;//小太阳的坐标x
sunY=0;//小太阳的坐标y
function sunMove(){
var sundiv = document.getElementById('sundiv');
sunX += directionX;
sunY += directionY;
//修改div的left top
sundiv.style.top=sunY+"px";
sundiv.style.left=sunX+"px";
//x方法（offsetWidth可以返回，当前这个对象的实际宽度）
if(sunX+sundiv.offsetWidth>=document.body.clientWidth||sunX<=0){
directionX=-directionX;
}
//判断y
if(sunY+sundiv.offsetHeight>=document.body.clientHeight||sunY<=0){
directionY=-directionY;
}
}
setInterval('sunMove()',5);
//-->
</script>
</head>
<body style="background-image: url(./1.jpg);">
<div id="sundiv" style="position: absolute;">
<img src="太阳.gif">
</div>
</body>
</html>
开始的时候加上DOCTYPE小太阳只会左右移动
最后发现是因为DOCTYPE的原因。
特别说明 可以使用doctype html 4.0 或者不写均可，但是用 xhtml 1.0不行因为 document.body.clientHeight为0