Untitled


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Практика</title>
    <meta charset=utf8>
    <script type="text/javascript">

        var ydir = '++',xdir = '++';
        var x = 3,y = 594;
        var angle=Math.PI/2.88;
        var backangle=Math.PI/29;
        var rinc=2;

        var xinc=rinc*Math.cos(angle);
        var yinc=rinc*Math.sin(angle);
        var xdecreas=6*rinc*Math.cos(backangle);
        var ydecreas=rinc*Math.sin(backangle);

var pos=true;
        function animate(){
            var round = document.getElementById('round');
            var rectangle = document.getElementById('rectangle')

if(pos){
            x=x+2;
            y=y-1;
}
else{
			x=x+3;
            y=y+0.88;
}
			if(parseInt(document.getElementById('round').style.top.split('p')[0]) < 360){
pos = false;
}
			document.getElementById('round').style.left=x;
    		document.getElementById('round').style.top=y;
            round.pixelLeft = x+document.body.scrollLeft+3;
            round.pixelTop = y+document.body.scrollTop+3;
            var tmp = rectangle.offsetTop + 12;
            var lTmp = round.offsetTop + round.offsetHeight;
            if (lTmp >= tmp){
                ydir='--';
            }
            lTmp = round.offsetLeft+ round.offsetWidth;
            if (round.offsetTop <=0 || lTmp>=document.getElementById('body').clientWidth) {
document.getElementById('round').style.left=1285;
    		document.getElementById('round').style.top=595;
                clearInterval(moveInterval);
return;
            }
        }
    </script>
</head>

<body id="body" bgcolor=darkgray>
<img id="triangle" style="position:absolute" src="triangle.png">
<img id="round" style="position:absolute" src="round.gif">
<img id="rectangle" style="position: absolute; left:430px" src="rectangle.gif"/>
<span id="Text" style="position: absolute; left:500px; top:590px;"><h1>Пример анимации</h1></span>

<script type="text/javascript">
    var round1=eval('document.all.round.style');
    document.getElementById('triangle').style.left=0;
    document.getElementById('triangle').style.top=533;
    document.getElementById('round').style.left=3;
    document.getElementById('round').style.top=594;
    document.getElementById('rectangle').style.left=500;
    document.getElementById('rectangle').style.top=230;
    moveInterval = setInterval(animate,1);
    setTimeout(moveInterval ,1000);
</script>
</body>
</html>