新人急请大神帮助我看看我的网页飘浮的图片代码哪错了？我的飘浮图片代码可以实现飘浮效果，但是在网页中没有碰撞网页边界弹回效果，请大神帮我看看错误出在哪里了？先谢谢了！
代码如下：
<html>
<textarea rows="200" cols="200" id="textarea1" name="textarea1">
将文档边框设置得很大，以便让浏览器显示出滚动条
</textarea>
<div id="box1" style="visibility:hidden; position:absolute;left=0;top=0;">
<a href="http://www.hao123.com" target="blank"><img src="logo1.gif"></a>
</div>
<script language="javascript">
var dirx=1,diry=1;
var xpos=0,ypos=0;
//为开阔自学者的知识面，下面使用多种方法来引用box1对象
box1.style.top=0;
document.body.all.box1.style.left=0;
document.body.all("box1").style.visibility="visible";
window.setInterval("movebox1()",100);
function movebox1()
{
//每次移动两个像素
xpos+=2+dirx;
ypos+=2+diry;
box1.style.top=ypos;
box1.style.left=xpos;
//下面代码实现当图标碰到窗口边界时，改变图标移动的方向，如果图标左边位置加上图标宽度的结果大于窗体客户区域宽度，就表示图标已碰到窗口右边界.
if(xpos<=0||xpos+box1.offsetwidth>=document.body.clientwidth)
{
dirx=-dirx;
}
if(ypos<=0||ypos+box1.offsetheight>=document.body.clientheight)
{
diry=-diry;
}
}
</script>
</html>
请大神看看为什么这里没有图片碰撞网页边界弹回效果？先谢谢啦！
代码如下：
<html>
<textarea rows="200" cols="200" id="textarea1" name="textarea1">
将文档边框设置得很大，以便让浏览器显示出滚动条
</textarea>
<div id="box1" style="visibility:hidden; position:absolute;left=0;top=0;">
<a href="http://www.hao123.com" target="blank"><img src="logo1.gif"></a>
</div>
<script language="javascript">
var dirx=1,diry=1;
var xpos=0,ypos=0;
//为开阔自学者的知识面，下面使用多种方法来引用box1对象
box1.style.top=0;
document.body.all.box1.style.left=0;
document.body.all("box1").style.visibility="visible";
window.setInterval("movebox1()",100);
function movebox1()
{
//每次移动两个像素
xpos+=2+dirx;
ypos+=2+diry;
box1.style.top=ypos;
box1.style.left=xpos;
//下面代码实现当图标碰到窗口边界时，改变图标移动的方向，如果图标左边位置加上图标宽度的结果大于窗体客户区域宽度，就表示图标已碰到窗口右边界.
if(xpos<=0||xpos+box1.offsetwidth>=document.body.clientwidth)
{
dirx=-dirx;
}
if(ypos<=0||ypos+box1.offsetheight>=document.body.clientheight)
{
diry=-diry;
}
}
</script>
</html>
请大神看看为什么这里没有图片碰撞网页边界弹回效果？先谢谢啦！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="width:100%;height:100%">
<head>
</head>
<body style="width:100%;height:100%">
<textarea rows="5" cols="30" id="textarea1" name="textarea1">
将文档边框设置得很大，以便让浏览器显示出滚动条
</textarea>
<div id="box1" style="visibility:hidden; position:absolute;left=0;top=0; width:50px;height:50px;border:1px solid red">
<a href="http://www.hao123.com" target="blank"><img src="http://www.hao123.com/logo1.gif"></a>
</div>
</body>
<script language="javascript">
var dirx=2,diry=2;
var xpos=0,ypos=0;
var box1 = document.getElementById("box1");
//为开阔自学者的知识面，下面使用多种方法来引用box1对象
box1.style.top=0+"px";
box1.style.left=0+"px";
box1.style.visibility="visible";
window.setInterval("movebox1()",100);
function movebox1()
{
//每次移动两个像素
xpos+=dirx;
ypos+=diry;
box1.style.top=ypos+"px";
box1.style.left=xpos+"px";
//下面代码实现当图标碰到窗口边界时，改变图标移动的方向，如果图标左边位置加上图标宽度的结果大于窗体客户区域宽度，就表示图标已碰到窗口右边界.
if(xpos<=0||xpos+box1.offsetWidth>=document.body.clientWidth)
{
dirx=-dirx;
}
if(ypos<=0||ypos+box1.offsetHeight>=document.body.clientHeight)
{
diry=-diry;
}
}
</script>
</html>
用 document.getElementById 获取dombox1.style.top=ypos+"px"; // 设置坐标加pxoffsetHeight clientHeight offsetWidth clientWidth
js 区分大小写。变量用 骆驼式命名法就是当变量名或函式名是由一个或多个单字连结在一起，而构成的唯一识别字时，第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字母，例如：myFirstName、myLastName，这样的变量名看上去就像骆驼峰一样此起彼伏，故得名。