Java Reference
In-Depth Information
<head>
<title>Moving Content</title>
<style type=”text/css”>
#divAdvert
{
position: absolute;
font: 12px Arial;
top: 4px;
left: 0px;
}
</style>
<script type=”text/javascript”>
var switchDirection = false;
function doAnimation() {
var divAdvert = document.getElementById(“divAdvert”);
var currentLeft = divAdvert.offsetLeft;
var newLocation;
if (switchDirection == false)
{
newLocation = currentLeft + 2;
if (currentLeft >= 400)
{
switchDirection = true;
}
}
else
{
newLocation = currentLeft - 2;
if (currentLeft <= 0)
{
switchDirection = false;
}
}
divAdvert.style.left = newLocation + “px”;
}
</script>
</head>
<body onload=”setInterval(doAnimation, 10)”>
<div id=”divAdvert”>Here is an advertisement.</div>
</body>
</html>
Save this page as
ch12_examp7.htm
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.
