AnimationExtender Demo

点击按钮后：
   
   
   
   
    
    
    
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AnimationExtender.aspx.cs" 
    
    
    
    Inherits="AnimationExtender" %>  
    
    
    
     
    
    
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>  
    
    
    
    <!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>AnimationExtender Demo</title>  
    
    
    
     
    
    
    
    <script type="text/javascript">  
    
    
    
     
    
    
    
    function pageLoad() {  
    
    
    
    }  
    
    
    
     
    
    
    
    </script>  
    
    
    
     
    
    
    
    <style type="text/css">  
    
    
    
    .wireFrame  
    
    
    
    {  
    
    
    
    font-style: normal;  
    
    
    
    line-height: 1px;  
    
    
    
    vertical-align: middle;  
    
    
    
    background-color: #FF00FF;  
    
    
    
    background-repeat: no-repeat;  
    
    
    
    border: thin dotted #00FF00;  
    
    
    
    }  
    
    
    
    .demoarea  
    
    
    
    {  
    
    
    
    font-weight: 200;  
    
    
    
    text-transform: capitalize;  
    
    
    
    color: #0000FF;  
    
    
    
    font-family: 华文隶书;  
    
    
    
    font-size: 24px;  
    
    
    
    }  
    
    
    
    </style>  
    
    
    
    </head>  
    
    
    
    <body>  
    
    
    
    <form id="form1" runat="server">  
    
    
    
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
    
    
    
    </asp:ToolkitScriptManager>  
    
    
    
    <div class="demoarea">  
    
    
    
    Any HTML content that you want.  
    
    
    
    <br />  
    
    
    
    <br />  
    
    
    
    <!-- Button used to launch the animation -->  
    
    
    
    <asp:Button ID="btnInfo" runat="server" OnClientClick="return false;" Text="Click Here" />  
    
    
    
    <!-- "Wire frame" div used to transition from the button to the info panel -->  
    
    
    
    <div id="flyout" class="wireFrame">  
    
    
    
    </div>  
    
    
    
    <!-- Info panel to be displayed as a flyout when the button is clicked -->  
    
    
    
    <div id="info"   
    
    
    
     
    
    
    
    style="display: none; width: 250px; z-index: 2; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 14px; border: 3px solid #CCCCCC; background-color: #FFFFCC; padding: 5px; font-family: 'Times New Roman', Times, serif; color: #000000;">  
    
    
    
    <div id="btnCloseParent" style="float: right; opacity: 100; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);">  
    
    
    
    <asp:LinkButton ID="btnClose" runat="server" OnClientClick="return false;" Text="X" 
    
    
    
    ToolTip="关闭"   
    
    
    
    Style="background-color: #FFFFFF; color: #FF0000; text-align: center;  
    
    
    
    font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;"   
    
    
    
    BorderColor="#8000FF" />  
    
    
    
    </div>  
    
    
    
    Once you get the general idea of the animation's markup, you'll want to play a bit.  
    
    
    
    All of the animations are created from simple, reusable building blocks that you  
    
    
    
    can compose together. Before long you'll be creating dazzling visuals. By grouping 
    
    
    
    steps together and specifying them to be run either in sequence or in parallel,  
    
    
    
    you'll achieve almost anything you can imagine, without writing a single line of 
    
    
    
    code!  
    
    
    
    </div>  
    
    
    
     
    
    
    
    <script type="text/javascript" language="javascript">  
    
    
    
    // Move an element directly on top of another element (and optionally  
    
    
    
    // make it the same size)  
    
    
    
    function Cover(bottom, top, ignoreSize) {  
    
    
    
    var location = Sys.UI.DomElement.getLocation(bottom);  
    
    
    
    top.style.position = 'absolute';  
    
    
    
    top.style.top = location.y + 'px';  
    
    
    
    top.style.left = location.x + 'px';  
    
    
    
    if (!ignoreSize) {  
    
    
    
    top.style.height = bottom.offsetHeight + 'px';  
    
    
    
    top.style.width = bottom.offsetWidth + 'px';  
    
    
    
    }  
    
    
    
    }  
    
    
    
    </script>  
    
    
    
     
    
    
    
    <asp:AnimationExtender ID="OpenAnimation" runat="server" TargetControlID="btnInfo">  
    
    
    
    <Animations>  
    
    
    
    <OnClick>  
    
    
    
    <Sequence>  
    
    
    
    <%-- Disable the button so it can't be clicked again --%>  
    
    
    
    <EnableAction Enabled="false" />  
    
    
    
    <%-- Position the wire frame and show it --%>  
    
    
    
    <ScriptAction Script="Cover($get('btnInfo'), $get('flyout'));" />  
    
    
    
    <StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/>  
    
    
    
    <%-- Move the wire frame from the button's bounds to the info panel's bounds --%>  
    
    
    
    <Parallel AnimationTarget="flyout" Duration=".3" Fps="25">  
    
    
    
    <Move Horizontal="150" Vertical="-50" />  
    
    
    
    <Resize Width="260" Height="280" />  
    
    
    
    <Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" />  
    
    
    
    </Parallel>  
    
    
    
    <%-- Move the panel on top of the wire frame, fade it in, and hide the frame --%>  
    
    
    
    <ScriptAction Script="Cover($get('flyout'), $get('info'), true);" />  
    
    
    
    <StyleAction AnimationTarget="info" Attribute="display" Value="block"/>  
    
    
    
    <FadeIn AnimationTarget="info" Duration=".2"/>  
    
    
    
    <StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/>  
    
    
    
    </Sequence>  
    
    
    
    </OnClick>  
    
    
    
    </Animations>  
    
    
    
    </asp:AnimationExtender>  
    
    
    
    <asp:AnimationExtender ID="CloseAnimation" runat="server" TargetControlID="btnClose">  
    
    
    
    <Animations>  
    
    
    
    <OnClick>  
    
    
    
    <Sequence AnimationTarget="info">  
    
    
    
    <%-- Shrink the panel out of view --%>  
    
    
    
    <StyleAction Attribute="overflow" Value="hidden"/>  
    
    
    
    <Parallel Duration=".3" Fps="15">  
    
    
    
    <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />  
    
    
    
    <FadeOut />  
    
    
    
    </Parallel>  
    
    
    
    <%-- Reset the target --%>  
    
    
    
    <StyleAction Attribute="display" Value="none"/>  
    
    
    
    <StyleAction Attribute="width" Value="250px"/>  
    
    
    
    <StyleAction Attribute="height" Value=""/>  
    
    
    
    <StyleAction Attribute="fontSize" Value="12px"/>  
    
    
    
    <%-- Enable the button --%>  
    
    
    
    <EnableAction AnimationTarget="btnInfo" Enabled="true" />  
    
    
    
    </Sequence>  
    
    
    
    </OnClick>  
    
    
    
    </Animations>  
    
    
    
    </asp:AnimationExtender>  
    
    
    
    </div>  
    
    
    
    </form>  
    
    
    
    </body>  
    
    
    
    </html>
AnimationExtender Demo

你可能感兴趣的:(开发,demo)
