Knowledge Base Nr: 00259 ajax2.txt - http://www.swe-kaiser.de
Downloads:
AJAX: Animierter Text/Grafik-Block über Timer
<?xml version="1.0" encoding="iso-8859-1"?>
<!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="de" lang="de">
<html>
<head>
<title>AJAX Demo 2</title>
<script type="text/javascript"src="zxml.js"></script>
<script type="text/javascript">
var nMovX = 0;
var nMovY = 0;
function moveBox()
{
nMovX = nMovX + 5;
if (nMovX > 400)
nMovX = 0;
nMovY = nMovY + 3;
if (nMovY > 300)
nMovY = 0;
var divMovingBox = document.getElementById("movingDiv");
//funzt nicht als style-definition???
divMovingBox.style.left = nMovX + "px";
divMovingBox.style.top = nMovY + "px";
divMovingBox.style.position = "absolute";
divMovingBox.style.display = "block";
divMovingBox.style.border = "3px solid red";
var nMovingSpeed = document.getElementById("movtimer").value;
setTimeout(moveBox, nMovingSpeed);
}
window.onload = function ()
{
if (zXmlHttp.isSupported())
{
moveBox();
}
}
</script>
</head>
<body>
<p>Der Smiley sollte sich abhängig vom Wert unterschiedlich schnell bewegen.</p>
<p>Bewegung: <input type="text" id="movtimer" value="1000" /> in [ms]</p>
<div id="movingDiv">blubber<img src="/kaiserreich/images/k_images/smiley.gif" /><b>schradel</b></div>
</body>
</html>