Java Reference
In-Depth Information
First, check the direction by checking the switchDirection variable. Remember, if it is false, the
animation is moving from left to right; so assign newLocation to contain the content's current position
and add 2, thus moving the content 2 pixels to the right.
You then need to check if the content has reached the
left
position of
400
pixels. If it has, then you
need to switch the direction of the animation, and you do this by changing
switchDirection
to
true
.
So the next time
doAnimation()
runs, it will begin to move the content from right to left.
The code to move the element in this new direction is similar to the previous code, except for a few key
differences.
else
{
newLocation = currentLeft - 2;
if (currentLeft <= 0)
{
switchDirection = false;
}
}
The fi rst difference is the value assigned to
newLocation
; instead of adding
2
to the current location,
you subtract
2
, thus moving the content
2
pixels to the left. Next, check if
currentLeft
is less than or
equal to
0
. If it is, you know you've reached the ending point of the right-to-left movement and need to
switch directions again by assigning
switchDirection
to be
false
.
Finally, set the new position of the content:
divAdvert.style.left = newLocation + “px”;
}
This fi nal line of the function sets the element's left property to the value stored in the
newLocation
variable plus the string
“px”
.
To run the animation, use the onload event handler in the <body/> element, and use the
window.setInterval() method to continuously execute doAnimation(). The following code
runs doAnimation() every 10 milliseconds:
<body onload=”setInterval(doAnimation, 10)”>
At this speed, the content moves at a pace that is easily seen by those viewing the page. If you
wanted to speed up or slow down the animation, simply change how often the
setInterval()
function calls
doAnimation()
by changing the second parameter.
What have you seen so far? Well, you've seen the DOM hierarchy and how it represents the HTML
document as a tree-like structure. You navigated through the different parts of it via DOM objects (the
Node
objects) and their properties, and you changed the properties of objects, thus altering the content
of the web page. This leaves just one area of the DOM to cover: the event model.
