Home > Developer > JavaScript
Copy codeThe Code is as follows:
<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 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
