Move an Image so It Slides on its own

[Total: 0    Average: 0/5]

This example shows how to have an image in a div and have that div “slide” or move at a rate for a specified amount of distance.

Head Code:

<SCRIPT type=text/javascript>
function suppressErrors() { return true; }
if (parseInt(navigator.appVersion) < 4) {
alert("This program requires a version 4 browser!");
onerror = suppressErrors;
}
</SCRIPT>
<SCRIPT type=text/javascript src="http://www.js-examples.com/bin/div_construct.js"></SCRIPT>
<script type=text/javascript>

var msg1 = '<img border=0 alt="" src="http://www.js-examples.com/js/pic1.gif">'
var div1 = new NewDiv(window, "d1", msg1, 100, 200,0,0,0,0,0,"ABSOLUTE");
</script>

Body Code:

<script type=text/javascript>
div1.output();
var delay = 30; // milliseconds between movements.
var myTimer = null;
var counter =100; // number of times to move the div
function moveIt() {
div1.moveBy(1,1);
if (--counter < 0 && myTimer != null)
  clearInterval(myTimer);
}
myTimer = setInterval("moveIt()", delay);
</SCRIPT>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *