zoukankan      html  css  js  c++  java
  • altas(ajax)控件(三):动画制作控件AnimationExtender

     
    AnimationExtender 是一个简单的动画制作控件,它可以很方便的在网页上制作简单的动画效果,非常的fashion!!!。
    它的原理是:
    1.先设置“目标控件(target control)“ ;
    2.当“目标控件(target control)“ 触发事件(如:OnLoad, OnClick, OnMouseOver, OnMouseOut)时,AnimationExtender便执行它的动画代码。
    下面看一个它的例子
        <form id="form1" runat="server">
            
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
            
    <!-- “打开”按钮 -->
            
    <asp:Button ID="btnInfo" runat="server" OnClientClick="return false;" Text="Click Here"/>
      
            
    <!-- flyout面板 -->
            
    <div id="flyout" style="display: none; overflow: hidden; z-index: 2; background-color: #FFFFFF; border: solid 1px #D0D0D0;"></div>
            
            
    <!-- Info面板-->
            
    <div id="info" style="display: none;  250px; z-index: 2; opacity: 0; progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px;">
                
    <div id="btnCloseParent" style="float: right; opacity: 0; progid:DXImageTransform.Microsoft.Alpha(opacity=0);">
                    
    <asp:LinkButton id="btnClose" runat="server" OnClientClick="return false;" Text="X" ToolTip="Close"
                        Style
    ="background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;" />
                
    </div>
                
    <div>
                    
    <p>
                            AnimationExtender 是一个简单的动画制作控件,
                            它可以很方便的在网页上制作简单的动画效果,非常的fashion!!!。
                            它的原理是:
                            1.先设置“目标控件(target control)“ ;
                            2.当“目标控件(target control)“ 触发事件
                            (如:OnLoad, OnClick, OnMouseOver, OnMouseOut)
                            时,AnimationExtender便执行它的动画代码。
                    
    </p>
                    
    <br />
                
    </div>
            
    </div>
            
            <script type="text/javascript" language="javascript">...
                
    // 把top控件定于bottom控件之上,并把他们的大小设置成一样。

                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>

            
            <%...-- 点击“打开”按钮,触发一下动画--%>
            
    <cc1:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="btnInfo">
                
    <Animations>
                    
    <OnClick>
                        
    <Sequence>
                            
    <%...-- 1.隐藏“打开”按钮--%>
                            
    <EnableAction Enabled="false" />
                            
                            
    <%...-- 2.定位flyout面板和“打开(btnInfo)”按钮一样,大小一样--%>
                            
    <ScriptAction Script="Cover($get('ctl00_SampleContent_btnInfo'), $get('flyout'));" />...
                            
    <%-- 3.显示flyout面板--%>

                            
    <StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/>
                            
                            
    <%-- 4.移动flyout面板 --%>
                            
    <Parallel AnimationTarget="flyout" Duration=".3" Fps="25"><%-- 时间0.3秒,帧数25 --%>
                                
    <Move Horizontal="150" Vertical="-50" /><%-- 水平移动150,垂直移动-50 --%>
                                
    <Resize Width="260" Height="280" /><%-- 宽度=260,高度=280 --%>
                                
    <Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" /><%-- 开始颜色=AAAAAA,结束颜色=FFFFFF --%>
                            
    </Parallel>
                            
                            
    <%-- 5.设置info面板, 显示info面板,并装入info面板,隐藏flyout面板 --%>
                            
    <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"/>
                            
                            
    <%-- 6.闪烁文字和边框,装入“关闭”按钮 --%>
                            
    <Parallel AnimationTarget="info" Duration=".5">
                                
    <Color PropertyKey="color" StartValue="#666666" EndValue="#FF0000" />
                                
    <Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" />
                            
    </Parallel>
                            
    <Parallel AnimationTarget="info" Duration=".5">
                                
    <Color PropertyKey="color" StartValue="#FF0000" EndValue="#666666" />
                                
    <Color PropertyKey="borderColor" StartValue="#FF0000" EndValue="#666666" />
                                
    <FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" />
                            
    </Parallel>
                        
    </Sequence>
                    
    </OnClick>
                
    </Animations>
            
    </cc1:AnimationExtender>
            
    <%-- 点击“关闭”按钮,触发一下动画--%>
            
    <cc1:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose">
                
    <Animations>
                    
    <OnClick>
                        
    <Sequence AnimationTarget="info">
                            
    <%--  逐步隐藏info面板 --%>
                            
    <StyleAction Attribute="overflow" Value="hidden"/>
                            
    <Parallel Duration=".3" Fps="15">
                                
    <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />
                                
    <FadeOut />
                            
    </Parallel>
                            
                            
    <%--  重置“关闭”按钮,以便下次调用 --%>
                            
    <StyleAction Attribute="display" Value="none"/>
                            
    <StyleAction Attribute="width" Value="250px"/>
                            
    <StyleAction Attribute="height" Value=""/>
                            
    <StyleAction Attribute="fontSize" Value="12px"/>
                            
    <OpacityAction AnimationTarget="btnCloseParent" Opacity="0" />
                            
                            
    <%--  显示“打开”按钮 --%>
                            
    <EnableAction AnimationTarget="btnInfo" Enabled="true" />
                        
    </Sequence>
                    
    </OnClick>
                    
    <OnMouseOver>
                        
    <Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" />
                    
    </OnMouseOver>
                    
    <OnMouseOut>
                        
    <Color Duration=".2" PropertyKey="color" StartValue="#FF0000" EndValue="#FFFFFF" />
                    
    </OnMouseOut>
                 
    </Animations>
            
    </cc1:AnimationExtender>

        
    </form>
     效果地址:http://asp.net/AJAX/Control-Toolkit/Live/Animation/Animation.aspx
  • 相关阅读:
    SharePoint 2010 User Profile Sync Service自动停止
    如何区别多个svchost.exe?
    Log Parser分析IIS log的一个简单例子
    Timeout expired. The timeout period elapsed prior to obtaining a connection from the pool. This may have occurred because all pooled connections were in use and max pool size was reached.
    Windows中右键点击文件夹, 结果找不到共享选项卡, 怎么办?
    介绍SOS中的SaveModule命令
    SharePoint中Draft版本的文档不会收到document added的Alert Email
    和我一起学Windows Workflow Foundation(1)创建和调试一个WF实例
    门户网站
    C#基础—— check、lock、using语句归纳
  • 原文地址:https://www.cnblogs.com/hainange/p/6153362.html
Copyright © 2011-2022 走看看