glide
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Gliding Layer Demo</title>
<script language="JavaScript">
<!--
// Copyrighted By Eddie Traversa
// http://dhtmlnirvana.com/
// All rights Reserved 2002
// Example -
// <a href="#" onmousedown="glide('elDiv',660,10)">glide</a>
// where the arguments are glide(id of layer, the end position of layer animation, number of steps)
function glide(obj,endPos,steps) {
// changing this number will vary the amount of gliding
var decrease = 0.05;
if (document.getElementById) {
el = document.getElementById(obj).style ;
}
else if (document.all){
el = document.all[obj].style;
}
else if (document.layers) {
el = document.layers[obj];
}
// you can change references to left in the script to top and that will give a vertical animation
el.xpos = parseInt(el.left);
if (el.xpos < endPos) {
distance = endPos - el.xpos;
steps = distance*decrease;
// to shove a layer off screen change to
// el.xpos -= steps;
el.xpos += steps;
el.left = el.xpos;
// change the 30 value to increase or decrease speed, higher the numeric value the slower the speed
setTimeout("glide('" + obj + "'," + endPos + "," + steps + ")",30);
}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<a href="#" onmousedown="glide('elDiv',660,10)">glide</a>
<div id="elDiv" style="position:absolute; left:50px; top:100px; width:30px; height:30px; clip:rect(0,30,30,0); layer-background-color:red; background-color:red;">
</div>
</body>
</html>