<html>
<head>
<script type="text/javascript">
dectionX=1;
dectionY=1;
decSonX=0;
decSonY=0;
function move(){
decSonX+=dectionX;
decSonY+=dectionY;
parent.son.style.top=decSonY+"px";
parent.son.style.left=decSonX+"px";
//document.write(parent.clientWidth);
if(decSonX+son.offsetWidth>parent.offsetWidth||decSonX<=0){
dectionX=-dectionX;
}
if(decSonY+son.offsetHeight>parent.offsetHeight||decSonY<=0){
dectionY=-dectionY;
}
//setTimeout("move()",10);
}
setInterval("move()",10);
</script>
</head>
<body>
<div style="background-color:#3333FF; width:1000px; height:500px;position:absolute" id="parent">
<div style="background-color:#FF0000; height:40px; width:40px; position:absolute" id="son"></div>
</div>
</body>
</html>
*************************************
为什么不可以撞倒后反弹,而是一直走,测试后发现son.offsetWidth有值而parent.offsetWidth却为未定义,这是为啥?
要把parent.offsetWidth改为什么,不会改为数字吧。。。求解
------解决方案--------------------
- HTML code
<html> <head> <script type="text/javascript"> dectionX=1; dectionY=1; decSonX=0; decSonY=0; function move(){ decSonX+=dectionX; decSonY+=dectionY; son.style.top=decSonY+"px"; son.style.left=decSonX+"px"; if(decSonX+son.offsetWidth>parentt.offsetWidth||decSonX<=0){ dectionX=-dectionX; } if(decSonY+son.offsetHeight>parentt.offsetHeight||decSonY<=0){ dectionY=-dectionY; } } setInterval("move()",10); </script> </head> <body> <div style="background-color:#3333FF; width:1000px; height:500px;position:absolute" id="parentt"> <div style="background-color:#FF0000; height:40px; width:40px; position:absolute" id="son"></div> </div> </body> </html>
------解决方案--------------------
命名不规范。。不要用关键字命名
------解决方案--------------------
是son跟parent这个对象没有定义
我试了下 改成 var son=document.getElementById("son"); son.offsetWidth 这样就行了