正在学习javascript 的朋友可以把它当作小练习动手做一做。加强自己的动手编码能力。
参考代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>ggggg</title> <link rel="stylesheet" type="text/css" href=""> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--js代码可以放置在任意位置，按照先后顺序依次执行 一般放在head标签之间--> <script type="text/javascript"> //定义全局变量 //小球坐标 ballX=0; ballY=0; //小球在x,y轴移动的方向 directX=1; directY=1; //小球移动 function ballMove(){ //小球移动 ballX+=2*directX; ballY+=2*directY; //同时修改小球的top 和width div2.style.top=ballY+'px'; div2.style.left=ballX+'px'; //window.alert(div1.offsetWidth);//offsetwidth在JS中是获取元素的宽,对应的还有offsetHeight //判断转向 //learInterval(i); if(ballX+div2.offsetWidth>=div1.offsetWidth ||ballX<=0){ directX=-directX; } if(ballY+div2.offsetHeight>=div1.offsetHeight || ballY<=0){ directY=-directY; } } //定时器 var i=setInterval("ballMove()",10); </script> </head> <body> <div id="div1" style="400px;height:300px;border:1px solid silver;POSITION: absolute; TOP: 100px"> <div id="div2" style="position:absolute;left:0px;top:0px;"><img src="ball.png"></div> </div> </body> </html>
图:
