<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
div{
position:absolute;
}
</style>
</head>
<body>
<div >
<img src="" height="100px" width="200px">
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
/*
Use window objects to achieve floating effect
1. There is a div, which is what we want to control, its starting point coordinate (0,0)
2. Set the horizontal and vertical speeds
3. Control div movement
1) Whether the div reaches the boundary, set the picture speed to move in reverse
*/
//Get the div object where the picture is located
var img=("floatdiv");
//Set the coordinates of the div starting point
var x=0,y=0;
//Set the div travel speed
var xSpeed=2,ySpeed=1;
//Set the picture to move
var w=-200,h=-100;
function floatdiv(){
//Compare whether the picture reaches the boundary, if you find the boundary and change the direction; if you have not reached the boundary
if(x>w||x<0) xSpeed= -xSpeed;
if(y>h||y<0) ySpeed= -ySpeed;
x+=xSpeed;
y+=ySpeed;
//Set the coordinate value, start coordinate + speed
=y+"px";
=x+"px";
setTimeout("floatdiv()",10);
}
floatdiv();
</script>