Smooth Moving Example Source


// Copyright © 2002 by Apple Computer, Inc., All Rights Reserved.
//
// You may incorporate this Apple sample code into your own code
// without restriction. This Apple sample code has been provided "AS IS"
// and the responsibility for its operation is yours. You may redistribute
// this code, but you are not permitted to redistribute it as
// "Apple sample code" after having made changes.

<html><head><title>Smooth Move</title>
<script type="text/javascript">
<!--
var the_timeout;

function moveDiv()
{
  // get the stylesheet
  //
  var the_style = getStyleObject("myDiv");
  if (the_style)
  {
    // get the current coordinate and add 5
    //
    var current_left = parseInt(the_style.left);
    var new_left = current_left + 5;

    // set the left property of the DIV, add px at the
    // end unless this is NN4
    //
    if (document.layers) 
    {
      the_style.left = new_left;
    }
    else 
    {  
      the_style.left = new_left + "px";
    }
    
    // if we haven't gone to far, call moveDiv() again in a bit
    // 
    if (new_left < 400)
    {
      the_timeout = setTimeout('moveDiv();',10);
    }
  }
}


function getStyleObject(objectId) {
    // cross-browser function to get an object's style object given its
    if(document.getElementById && document.getElementById(objectId)) {
	// W3C DOM
	return document.getElementById(objectId).style;
    } else if (document.all && document.all(objectId)) {
	// MSIE 4 DOM
	return document.all(objectId).style;
    } else if (document.layers && document.layers[objectId]) {
	// NN 4 DOM.. note: this won't find nested layers
	return document.layers[objectId];
    } else {
	return false;
    }
} // getStyleObject

      
// -->
</script>
</head>
<body>
<div id = "myDiv" style="position:absolute; top:150px; left:100px;"><img src="bee_right.gif">
</div>
<br>
<a href="#" onClick="the_timeout=setTimeout('moveDiv();',100); return false;">start moving!</a> <br> 
<a href="#" onClick="clearTimeout(the_timeout); return false;">stop wandering</a>
</body>
</html>