<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css" > #a{ position:absolute; top:0px; left:0px; width:100px; height:100px;} </style> <title>excise</title> <script type="text/javascript"> var speedx=Math.random()*50; var b=1; var c=1; var w=document.body.offsetWidth; var h=document.body.offsetHeight; function move(){ var x=document.getElementById("a").style.left; var y=document.getElementById("a").style.top; if (parseInt(x)+150>w||parseInt(x)<0){ b=-b;} if (parseInt(y)+100>h||parseInt(y)<0){ c=-c; } document.getElementById("a").style.left=x+speedx*b; document.getElementById("a").style.top=y+speedx*c; setTimeout("move()",500) } <!--就是这句了,好像有无都一样--> </script> </head> <body onload="move()"> <div id="a"><img src="../image/3.jpg" width="100" heigh="100" /></div> </body> </html> 不好意思从新发下,还不太了解论坛的功能。
1、页面加载是从上到下,document对象得body加载完毕才有效。 <title>excise</title> <script type="text/javascript"> var speedx=Math.random()*50; var b=1; var c=1; var w=document.body.offsetWidth; var h=document.body.offsetHeight;2、offsetWidth不一定有这个属性,得兼容clientWidth var w=document.body.offsetWidth; var h=document.body.offsetHeight;3、style.left没有赋值过则是空,该属性不是从样式表里读取,转换为整数为NaN其他细节就自己看代码吧: <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css" > #a{ position:absolute; top:0px; left:0px; width:100px; height:100px; }</style> <title>excise </title> <script type="text/javascript"> var speedx = Math.random() * 50; var b = 1; var c = 1;function move(){ var w = document.body.offsetWidth || document.body.clientWidth; var h = document.body.offsetHeight || document.body.clientHeight; var x = parseFloat(document.getElementById("a").style.left); if (isNaN(x)) x = 0; var y = parseFloat(document.getElementById("a").style.top); if (isNaN(y)) y = 0; if (x + speedx * b + 100 > w || x + speedx * b < 0) { b = -b; } if (y + speedx * c + 150 > h || y + speedx * c < 0) { c = -c; } document.getElementById("a").style.left = x + speedx * b + "px"; document.getElementById("a").style.top = y + speedx * c + "px"; setTimeout("move()", 500); } </script> </head> <body onload="move()"> <div id="a"> <img src="../image/3.jpg" width="100" heigh="100" /> </div> </body> </html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" >
#a{
position:absolute;
top:0px;
left:0px;
width:100px;
height:100px;}
</style>
<title>excise</title>
<script type="text/javascript">
var speedx=Math.random()*50;
var b=1;
var c=1;
var w=document.body.offsetWidth;
var h=document.body.offsetHeight;
function move(){
var x=document.getElementById("a").style.left;
var y=document.getElementById("a").style.top;
if (parseInt(x)+150>w||parseInt(x)<0){
b=-b;}
if (parseInt(y)+100>h||parseInt(y)<0){
c=-c; }
document.getElementById("a").style.left=x+speedx*b;
document.getElementById("a").style.top=y+speedx*c;
setTimeout("move()",500) } <!--就是这句了,好像有无都一样-->
</script>
</head>
<body onload="move()">
<div id="a"><img src="../image/3.jpg" width="100" heigh="100" /></div>
</body>
</html>
不好意思从新发下,还不太了解论坛的功能。
<title>excise</title>
<script type="text/javascript">
var speedx=Math.random()*50;
var b=1;
var c=1;
var w=document.body.offsetWidth;
var h=document.body.offsetHeight;2、offsetWidth不一定有这个属性,得兼容clientWidth
var w=document.body.offsetWidth;
var h=document.body.offsetHeight;3、style.left没有赋值过则是空,该属性不是从样式表里读取,转换为整数为NaN其他细节就自己看代码吧:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" >
#a{
position:absolute;
top:0px;
left:0px;
width:100px;
height:100px;
}</style>
<title>excise </title>
<script type="text/javascript">
var speedx = Math.random() * 50;
var b = 1;
var c = 1;function move(){
var w = document.body.offsetWidth || document.body.clientWidth;
var h = document.body.offsetHeight || document.body.clientHeight; var x = parseFloat(document.getElementById("a").style.left);
if (isNaN(x)) x = 0;
var y = parseFloat(document.getElementById("a").style.top);
if (isNaN(y)) y = 0;
if (x + speedx * b + 100 > w || x + speedx * b < 0) {
b = -b;
}
if (y + speedx * c + 150 > h || y + speedx * c < 0) {
c = -c;
}
document.getElementById("a").style.left = x + speedx * b + "px";
document.getElementById("a").style.top = y + speedx * c + "px"; setTimeout("move()", 500);
}
</script>
</head>
<body onload="move()">
<div id="a"> <img src="../image/3.jpg" width="100" heigh="100" /> </div>
</body>
</html>