首先设一个大的div，外边框设置一定的宽，作为墙壁，里面再写一个小的div，也设置一定的宽和高以及边框，首先要想一下，怎样能实现这个效果，小的div是在大的div的内部运动，如果往下运动就是说小div的offsetTop在逐渐的变大，变大到大div下边的border即墙壁时，就要向上运动，这个时候小div的offsetTop就会逐渐变小；同样，向右或者向左也是逐渐改变小div的offsetLeft值的大小，要注意的是当碰到大div的墙壁时的那个临界条件。
下面我们看一下这种效果实现的代码，这里用的是布尔值来写的，实际上我们还有另外一种写法用1和-1来判断小球是否接触到四周的墙壁；
HTML代码：
<script type="text/
javascript">
<!--
var outer=document.getElementById('outer');
var inner=document.getElementById('inner');
var innerwidth=inner.offsetWidth;//获取漂浮物自身所占的宽度（包括border/padding）；
var innerheight=inner.offsetHeight;//获取漂浮物自身所占的长度（包括border/padding）；
var outerwidth=outer.clientWidth;//获取漂浮物父标签内容区域的宽度；
var outerheight=outer.clientHeight;//获取漂浮物父标签内区域的高度；
var sonheight=outerheight-innerheight;//获取漂浮物在范围内要运动的长度；
var sonwidth=outerwidth-innerwidth;//获取漂浮在范围内要运动的宽度；
var Move=true;//true为向下运动，false为向上运动
var move=true;//true为向左运动，false为向右运动
var a=inner.offsetLeft;
var b=inner.offsetTop;
function moving()
{
if(Move)
{
if(b<sonheight)
{
b++;
inner.style.top=b+'px';
}
else
{
Move=false;
}
}
else
{
if(b>0)
{
b--;
inner.style.top=b+'px';
}
else
{
Move=true;
}
}
if(move)
{
if(a<sonwidth)
{
a++;
inner.style.left=a+'px';
}
else
{
move=false;
}
}
else
{
if(a>0)
{
a--;
inner.style.left=a+'px';
}
else
{
move=true;
}
}
}
var t=setInterval(moving,25);
//-->
</script>
