Creating Simple Animating Object Using JavaScript in ASP.NET

Vishal Gilbile
13y
17.6k
0
0

Article

In this example we are going to learn how to animate an object using JavaScript. The object I'm referring to here is any image. Consider an example whereby we have an image and on click of that image the image should move from one place to another place. This task can be done using JavaScript in ASP.Net whereby we are moving an object from one place to another place.

The following is the design of the application.

Whereby we have a div control which has an image being applied on the background and simultaneously inside the div we are having an image control displaying the image of an airplane when a user clicks on the airplane then that object will move from one place to another place.

The following is the source code for that.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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" >
<head runat="server">
    <title>Untitled Page</title>
   <script type="text/javascript">
        var timer;
        function AnimateAero()
        {
            clearInterval(timer);
           document.getElementById("aero").style.left="860px";
           timer=setInterval("TakeOff()",10);
        }
        function TakeOff()
        {
            document.getElementById("aero").style.pixelLeft -= 2;
            if (document.getElementById("aero").style.pixelLeft < 0)
            {
                document.getElementById("aero").style.left="860px";
                TakeOff();
            }
         }
   </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="position:relative; width:950px; height:350px; border:dashed 1px; background-image:url('clods.jpg'); background-repeat:inherit;" align="right">
        <img id="aero" src="aeroplane.jpg" style="position:absolute; left:846px; width: 100px; top: 126px; height: 61px;" onclick="AnimateAero()" />
    </div>
    </form>
</body>
</html>