Javascript floating advertisement javascript floating layer javascript effect javascript special effect floating effect webpage floating image effect doctype floating effect javascript tutorial
A non-stop floating image changes the floating direction when it encounters any side of the browser, just like a ball. This effect is mainly used for website advertisements. The Code is as follows: Save the following code as an htm file to run it.
<Div id = "img" style = "position: absolute; left: 35px; top: 556px; width: 120;
Height: 172 ">
</img>
</Div>
<Script language = "JavaScript">
<! -- Begin
Var xPos = 20;
Var yPos = document. body. clientHeight;
Var step = 1;
Var delay = 30;
Var height = 0;
Var Hoffset = 0;
Var Woffset = 0;
Var yon = 0;
Var xon = 0;
Var pause = true;
Var interval;
Img. style. top = yPos;
Function changePos (){
Width = document. body. clientWidth;
Height = document. body. clientHeight;
Hoffset = img. offsetHeight;
Woffset = img. offsetWidth;
Img. style. left = xPos + document. body. scrollLeft;
Img. style. top = yPos + document. body. scrollTop;
If (yon ){
YPos = yPos + step;
}
Else {
YPos = yPos-step;
}
If (yPos <0 ){
Yon = 1;
YPos = 0;
}
If (yPos> = (height-Hoffset )){
Yon = 0;
YPos = (height-Hoffset );
}
If (xon ){
XPos = xPos + step;
}
Else {
XPos = xPos-step;
}
If (xPos <0 ){
Xon = 1;
XPos = 0;
}
If (xPos> = (width-Woffset )){
Xon = 0;
XPos = (width-Woffset );
}
}
Function start (){
Img. visibility = "visible ";
Interval = setInterval ('changepos () ', delay );
}
Start ();
// End -->
</Script>