<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 id = "floatdiv">
</Div>
</Body>
</Html>
<Script language = "javascript" type = "text/javascript">
/*
Use the window object to achieve floating Effect
1. There is a div that we want to control. Its starting point coordinate (0, 0)
2. Set the horizontal and vertical speed
3. Control div Movement
1) whether the div has reached the boundary and sets the image speed to move in reverse direction
*/
// Obtain the div object www.2cto.com of the image.
Var img = document. getElementById ("floatdiv ");
// Set the div Start Point Coordinate
Var x = 0, y = 0;
// Set the div travel speed
Var xSpeed = 2, ySpeed = 1;
// Set the image Movement
Var w = document. body. clientWidth-200, h = document. body. clientHeight-100;
Function floatdiv (){
// Compare whether the image has reached the border. For example, check whether the image has reached the border to change the direction. For example, if the image has not reached the border
If (x> w | x <0) xSpeed =-xSpeed;
If (y> h | y <0) ySpeed =-ySpeed;
X + = xSpeed;
Y + = ySpeed;
// Set the coordinate value, starting coordinate + speed
Img. style. top = y + "px ";
Img. style. left = x + "px ";
SetTimeout ("floatdiv ()", 10 );
}
Floatdiv ();
</Script>
From the column of youngerhao