In this example, you are going to learn how to create simple animation of an object using JavaScript. The object we’re 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 by moving an object from one place to another place.
How to Create Simple Animation in ASP.NET?
The following is the design of the application:
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.
The following is the source code for moving the airplane from one cloud to another cloud:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<%@ 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> |
When a user clicks on the airplane then that object will move from one place to another place. This is how it looks:
Done, we’ve created a simple animation using JavaScript in ASP.NET. Hope that you’ll like this example!
Looking for ASP.NET Hosting on European Server? We can help you a lot!
hostforlifeasp.net is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.
