Create a page with dynamic effects. Write the code to include layers and basic animation.

<html>
<head>
<style>
    .moveable{
        position: absolute;
    }
</style>
<script type = "text/javascript">
    var x = 5;
    var y = 5;
    var dest_x = 300;
    var dest_y = 300;
    var interval = 10;
    function moveImage()
    {
        if(x < dest_x)
            x = x + interval;
        if(y < dest_y)
            y = y + interval;
      
        document.getElementById("ufo").style.top = y + "px";
        document.getElementById("ufo").style.left = x + "px";
        if((x + interval < dest_x) && (y + interval < dest_y))
        {
            window.setTimeout("moveImage()", 100);
        }
    }
</script>
</head>
<body onload = "moveImage()">
    <div id = "ufo" class = "moveable">
        <img src = "image.jpg" alt = "please link to a valid image" />
    </div>
</body>
</html>

2 comments: