Advertising | Web page
Web page floating wide picture special effects, this special effect we always like, the mouse points to picture after the picture stopped moving.
<div id= "ad" style= "Position:absolute" ><a href= "http://www.webjx.com" ></a></div><script> var x = 50,y = var Xin = true, Yin = True va R step = 1 var delay = ten var Obj=document.getelementbyid ("ad") function Floatad () {var l=t=0 var r= documen t.body.clientwidth-obj.offsetwidth var B = document.body.clientheight-obj.offsetheight Obj.style.left = x + docume Nt.body.scrollLeft obj.style.top = y + document.body.scrollTop x = x + step* (xin?1:-1) if (x < L) {xin = True x = L} if (x > R) {xin = false; x = R} y = y + step* (yin?1:-1) if (Y < T) {Yin = true; y = T} if (Y > B) {yin = false; y = b}} var itl= setinterval ("Floatad ()", delay) obj.onmouseover=function () {Clearinterv Al (ITL)} obj.onmouseout=function () {Itl=setinterval ("Floatad ()", delay)}</script>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Description: Code Analysis:
<div id= "ad" style= "Position:absolute ><a href=" http://www.webjx.com "target=" _blank "></a></div>
<script>
var x = 50,y =//[color=maroon] The initial position of the floating layer, respectively, corresponding to the initial x and Y coordinates of the layer
var Xin = true, Yin = true//Determine whether the X and Y coordinates of the layer are within the control range, Xin to the true layer to the right, otherwise to the left; the yin is really the layer moving downward, otherwise up
The var step = 1//layer move stride, the greater the value the faster the moving speed
var delay = 5//Layer move time interval, in milliseconds, smaller values move faster
var Obj=document.getelementbyid ("ad")//Capture the layer with the ID AD as the floating target
function Floatad () {
The left boundary (L) and Upper boundary (T) coordinates of the move range of the Var l=t=0//Layer
The right boundary of the Var r= document.body.clientwidth-obj.offsetwidth//Layer movement
var B = bottom boundary of document.body.clientheight-obj.offsetheight//layer movement
Obj.style.left = x + document.body.scrollLeft//update layer X coordinate to achieve motion in x-axis direction Document.body.scrollLeft the distance to the right of the scroll bar of the document area to ensure that the layer remains visible when the scroll bar is pulled right
Obj.style.top = y + document.body.scrollTop//update the y-coordinate of the layer to achieve the motion in the direction of Y axis Document.body.scrollTop the distance that the scroll bar of the document area is pulled down to ensure that the layer is still visible when the scroll bar is pulled down
x = x + step* (xin?1:-1)//To determine the movement direction of the layer on the x-axis by judging the range of the layer
if (x < L) {Xin = true; processing when x = L}//layer exceeds left boundary
if (x > R) {xin = false; handling when the x = R}//layer exceeds the right boundary
y = y + step* (yin?1:-1)//To determine the movement direction of the layer on the Y axis by determining the range of layers
if (Y < T) {Yin = true; y = process when T}//layer exceeds upper bounds
Handling if (Y > B) {yin = false; y = b}//layer exceeds bottom boundary
}
var itl= setinterval ("Floatad ()", delay)//delay function once per Floatad second
The Obj.onmouseover=function () {clearinterval (ITL)}//layer clears the above interval event when the mouse is moved, implementing the effect that the layer stops moving when the mouse is moved
Obj.onmouseout=function () {Itl=setinterval ("Floatad ()", delay)}//layer starts the interval event when the mouse moves away, realizes the effect that the layer continues to move when the mouse moves away
</script>
