moving an image
So we’ve all seen those moving banners on web pages now and then. The way this is accomplished is much easier than you might think. We use a relative positioned item and simply add a new position to it, in increments or one in this case through the use of the increment operator (++).
We start by assigning an initial value to the position, in this case 1. We then increment that value a set number of times every 10 milliseconds. To make the image travel faster, increase the amount incremented or reduce the amount of milliseconds to make each position change, or a combination of both.
<html>
<head>
<script type="text/javascript">
var i=1
function starttimer() {
document.getElementById('myimage').style.position="relative";
document.getElementById('myimage').style.left=+i;
i++;
timer=setTimeout("starttimer()",10);
}
function stoptimer() {
clearTimeout(timer);
}
</script>
</head>
<body onload="starttimer()" onunload="stoptimer()">
<img id="myimage" src="smiley.gif" width="32" height="32" />
</body>
</html>
Start with the original position of the image stated normally. As the image position is always available to be read, so it is to be altered. If you’re getting a jumpy, dithered sort of effect, alter the time of each positioning to a smaller value. This will give you a finer degree of control.
If you’d like to explore this further, think about changing the image or resizing the image with each position change. There can be more than one DOM statement applied to a page element within a JavaScript function, so there are quite a few more options to be figured out.
|
