<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head id="Head2">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Untitled Page</title>
<style type="text/css">
body { min-height: 100%; }
</style>
<script type="text/javascript">
<!--[CDATA[
function _aspxPxToInt(px) {
return _aspxPxToNumber(px, parseInt);
}
function _aspxPxToNumber(px, parseFunction) {
var result = 0;
if(px != null && px != "") {
try {
var indexOfPx = px.indexOf("px");
if(indexOfPx > -1)
result = parseFunction(px.substr(0, indexOfPx));
} catch(e) { }
}
return result;
}
function Drag(object, xTo, yTo, xStep, yStep, interval) {
if(_aspxPxToInt(object.style.left) != xTo)
object.style.left = (_aspxPxToInt(object.style.left) + xStep) + "px";
if(_aspxPxToInt(object.style.top) != yTo)
object.style.top = (_aspxPxToInt(object.style.top) + yStep) + "px";
if(_aspxPxToInt(object.style.top) != yTo || _aspxPxToInt(object.style.left) != xTo)
setTimeout(function () { Drag(object, xTo, yTo, xStep, yStep, interval); }, interval);
}
function startDrag() {
Drag(document.getElementById("testDiv1"), window.innerWidth - 100, 150, 1, 1, 10);
Drag(document.getElementById("testDiv2"), window.innerWidth - 100, 250, 1, 1, 20);
return false;
}
-->
</script>
</head>
<body>
<input type="button" onclick="startDrag()" style="margin-top: 250px;" value="Start Animation" />
<div id="testDiv1" style="display: table; background-color: orange; width: 200px; height: 50px; position: absolute; top: 0px; left: 0px;"></div>
<div id="testDiv2" style="display: table; background-color: violet; width: 200px; height: 50px; position: absolute; top: 100px; left: 0px;"></div>
</body>
</html>