Java Reference
In-Depth Information
} else {
newLocation = currentLeft - 2;
if (currentLeft <= 0) {
switchDirection = false;
}
}
divAdvert.style.left = newLocation + "px";
}
setInterval(doAnimation, 10);
</script>
</body>
</html>
Save this page as
ch9 _ example6.html
and load it into your browser. When you load the page into the
browser, the content should start moving from left to right, starting at the left edge of the viewport.
When the content reaches a left position of
400
pixels, the content switches directions and begins to
move back toward the left edge. This animation is continuous, so it should bounce between the two
points (
0
and
400
) perpetually.
Inside the body of the page is a
<div/>
element. This element has an
id
of
divAdvert
so that you can
retrieve it with the
getElementById()
method, because this is the element you want to animate:
<div id="divAdvert">
Here is an advertisement.
</div>
This element has no
style
attributes because all the style information is inside the style sheet located
in the head of the page. In the style sheet, you define a starting point for this
<div/>
. You want the
animation to go first from left to right, and you want it to start at the left edge of the browser:
#divAdvert {
position: absolute;
font: 12pt arial;
top: 4px;
left: 0px;
}
The first style declaration positions the element absolutely, and the second specifies the font as 12‐point
Arial. The next declaration positions the element four pixels from the top of the browser's viewport.
Setting the top position away from the topmost edge makes the text a little easier to read. Finally, the
last line positions the
divAdvert
element along the left edge of the viewport with the
left
property.
Within the script block is a global variable called
switchDirection
:
var switchDirection = false;
This variable keeps track of the direction in which the content is currently going. If
switchDirection
is
false
, the content is moving from left to right, which is the default. If
switchDirection
is
true
, the
content is moving from right to left.
