Tuesday 30 April 2013

Animation in aspx page





<%@ 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>jQuery animation example</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <style>
      #plane{
        position:relative;
        top:0px;
        background-image: url(aeroplane1.jpg);
        background-repeat: no-repeat;
        display:block;
        height:200px;
        width:300px;
      }
    </style>
  </head>

  <body style="overflow:hidden">
    <span id="plane"></span>

    <script>
        $(document).ready(function () {

            function flyPlane() {
                plane.css('left', startPos);
                plane.animate({ left: -235 }, 12000, 'linear')
            };

            var screenWidth = $(document).width();
            var startPos = screenWidth;
            var plane = $('#plane')
            flyPlane();
            setInterval(function () {
                flyPlane();
            }, 15500);
        });
    </script>
  </body>
</html>

The Image is save and use


No comments:

Post a Comment