440 Chapter 24 – Introduction to DHTMLDHTML Examples
Web Design in a Nutshell, eMatter EditionChanging this example to suit your needsThe previous example can be copied and changed to suit your needs. To slow
down the animation, you can decrease the number of milliseconds within the
setInterval function, like this:
<BODY onload="counter = setInterval('motion()', 500)">
With the second parameter in thesetIntervalfunction set to 500 , it will wait
500 milliseconds before executing the motion function again.
To make theanimateobject move from top to bottom, you might change the
Cascading Style Sheet to this:
<STYLE TYPE="text/css">
#animate {position: absolute; left: 10; top: -10;}
</STYLE>
This starts the text outside of the browser page as before, but 10 pixels above the
top rather than 80 to the left. Now we can make the text animate downward by
changing themotionfunction. Within themotionfunction, changedocument.
animate.left to document.animate.top and document.all.animate.
style.pixelLeft todocument.all.animate.style.pixelTop like this:
function motion()
{
if (isNet4)
{
// Move the object 2 pixels down rather than to the
// left as before.
document.animate.top += 2;if (document.animate.top > 200)
{
clearTimeout(counter);
}
}if (isIE4)
{// Move the object 2 pixels down rather than to the
// left as before.
document.all.animate.style.pixelTop += 2;if (document.all.animate.style.pixelTop > 200)
{
clearTimeout(counter);
}
}
}
To make the animation stop 300 pixels into the document rather than 200, change
if (document.all.animate.style.pixelTop > 200)