Asp.net Ajax 服务器控件使用 --- 3.Animation

Animation Demonstration

<div id="flyout" style="z-index: 2; display: none; border: solid 1px #D0D0D0; background-color: #FFFFFF;
        overflow: hidden;">
        &nbsp;</div>
    <div id="info" style="z-index: 2; display: none; font-size: 12px; border: solid 1px #CCCCCC;
        background-color: #FFFFFF; width: 250px; padding: 5px; font-family: font-size: 12px;">
        <div style="float: right; opacity: 0; filter: alpha(opacity=0);" id="btnCloseParent">
            <asp:LinkButton ID="btnClose" runat="server" OnClientClick="return false;" Text=""
                Style="text-align: right; border: outset thin white; padding: 5px; text-decoration: none;
                background-color: #666666; color: White; text-align: center; font-weight: bold;"
                ToolTip="Close">X</asp:LinkButton></div>
        <div>
            <p>
                第一章 中国哲学的精神 哲学在中国文化中所占的地位，历来可以与宗教在其他文化中的地位相比。在中国，哲 学与知识分子人人有关。在旧时，一个人只要受教育，就是用哲学发蒙。儿童入学，首先教
                他们读“四书”，即《论语》、《孟子》、《大学》、《中庸》。“四书”是新儒家哲学最 重要的课本。有时候，儿童刚刚开始识字，就读一种课本，名叫《三宇经》，每句三个宇，
                偶句押韵，朗诵起来便于记忆。这本书实际上是个识字课本，就是它，开头两句也是“人之 初，性本善”。这是孟子哲学的基本观念之一。
            </p>
            <br />
            <p>
                The XML defining the animations is very easy to learn and write, such as this example's
                <asp:LinkButton ID="lnkShow" OnClientClick="return false;" runat="server">show</asp:LinkButton>
                and
                <asp:LinkButton OnClientClick="return false;" ID="lnkClose" runat="server">close</asp:LinkButton>
                markup.
            </p>
        </div>
    </div>

    <script type="text/javascript" language="javascript">
            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>

Animation

    <cc1:AnimationExtender ID="ace" runat="server" TargetControlID="btnInfo">
        <Animations>
                <OnLoad><OpacityAction AnimationTarget="info" Opacity="0" /></OnLoad>
                <OnClick>
                    <Sequence>
                        <EnableAction Enabled="false" />
                        <ScriptAction Script="Cover($get('ctl00_ContentPlaceHolder1_btnInfo'), $get('flyout'));" />
                        <StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/>                            
                        <Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
                            <Move Horizontal="150" Vertical="-50" />
                            <Resize Width="260" Height="280" />
                            <Color AnimationTarget="flyout" StartValue="#AAAAAA" EndValue="#FFFFFF" Property="style" PropertyKey="backgroundColor" />                                
                        </Parallel>                            
                        <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"/>
                        <StyleAction AnimationTarget="info" Attribute="height" value="auto" />
                        <Parallel Duration=".5">
                            <Color AnimationTarget="info" StartValue="#666666" EndValue="#FF0000" Property="style" PropertyKey="color" />
                            <Color AnimationTarget="info" StartValue="#666666" EndValue="#FF0000" Property="style" PropertyKey="borderColor" />
                        </Parallel>
                        <Parallel Duration=".5">
                            <Color AnimationTarget="info" StartValue="#FF0000" EndValue="#666666" Property="style" PropertyKey="color" />
                            <Color AnimationTarget="info" StartValue="#FF0000" EndValue="#666666" Property="style" PropertyKey="borderColor" />
                            <FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" />                            
                        </Parallel>
                        
                    </Sequence>
                </OnClick>
        </Animations>
    </cc1:AnimationExtender>
    <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="btnClose">
        <Animations>
                <OnClick>
                    <Sequence>
                        <StyleAction AnimationTarget="info" Attribute="overflow" Value="hidden"/>
                        <Parallel AnimationTarget="info" Duration=".3" Fps="15">
                            <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />
                            <FadeOut />
                        </Parallel>
                        <StyleAction AnimationTarget="info" Attribute="display" Value="none"/>
                        <StyleAction AnimationTarget="info" Attribute="width" Value="250px"/>
                        <StyleAction AnimationTarget="info" Attribute="height" Value=""/>
                        <StyleAction AnimationTarget="info" Attribute="fontSize" Value="12px"/>
                        <StyleAction AnimationTarget="btnCloseParent" Attribute="opacity" value="0" />
                        <StyleAction AnimationTarget="btnCloseParent" Attribute="filter" value="alpha(opacity=0)" />
                        <EnableAction AnimationTarget="ctl00_ContentPlaceHolder1_btnInfo" Enabled="true" />
                    </Sequence>
                </OnClick>
                <OnMouseOver>
                    <Color Duration=".2" StartValue="#FFFFFF" EndValue="#FF0000" Property="style" PropertyKey="color" />                            
                </OnMouseOver>
                <OnMouseOut>
                    <Color Duration=".2" EndValue="#FFFFFF" StartValue="#FF0000" Property="style" PropertyKey="color" />                            
                </OnMouseOut>
        </Animations>
    </cc1:AnimationExtender>
    <asp:Panel ID="xmlShow" runat="server" Style="z-index: 3; background-color: #DDD;
        border: thin solid navy; display: none;">
      <pre style="margin: 5px;">
        　　西方人看到儒家思想渗透中国人的生活，就觉得儒家是宗教。可是实事求是地说，儒家
并不比柏拉图或亚力士多德的学说更像宗教。“四书”诚然曾经是中国人的“圣经”，但是
“四书”里没有创世纪，也没有讲天堂、地狱。
　　当然，哲学、宗教都是多义的名词。对于不同的人，哲学、宗教可能有完全不同的含
义。人们谈到哲学或宗教时，心中所想的与之相关的观念，可能大不相同。至于我，我所说
的哲学，就是对于人生的有系统的反思的思想。每一个人，只要他没有死，他都在人生中。
但是对于人生有反思的思想的人并不多，其反思的思想有系统的人就更少。哲学家必须进行
哲学化；这就是说，他必须对于人生反思地思想，然后有系统地表达他的思想。
　　这种思想，所以谓之反思的，因为它以人生为对象。人生论，宇宙论，知识论都是从这
个类型的思想产生的。宇宙论的产生，是因为宇宙是人生的背景，是人生戏剧演出的舞台。
知识论的出现，是因为思想本身就是知识。照西方某些哲学家所说，为了思想，我们必须首
先明了我们能够思想什么；这就是说，在我们对人生开始思想之前，我们必须首先“思想我
们的思想”。
      </pre> 
    </asp:Panel>
    <asp:Panel ID="xmlClose" runat="server" Style="z-index: 3; background-color: #DDD;
        border: thin solid navy; display: none;">
      <pre style="margin: 5px;">
        凡此种种“论”，都是反思的思想的产物。就连人生的概念本身、宇宙的概念本身，知
识的概念本身，也都是反思的思想的产物。无论我们是否思人生，是否谈人生，我们都是在
人生之中。也无论我们是否思宇宙，是否谈宇宙，我们都是宇宙的一部分。不过哲学家说宇
宙，物理学家也说宇宙，他们心中所指的并不相同。哲学家所说的宇宙是一切存在之全，相
当于古代中国哲学家惠施所说的“大一”，其定义是“至大无外”。所以每个人、每个事物
都应当看作宇宙的部分。当一个人思想宇宙的时候，他是在反思地思想。
　　当我们思知识或谈知识的时候，这个思、谈的本身就是知识。用亚力士多德的话说，它
是“思想思想”；思想思想的思想是反思的思想。哲学家若要坚持在我们思想之前必须首先
思想我们的思想，他就在这里陷入邪恶的循环；就好像我们竟有另一种能力可以用它来思想
我们的思想！实际上、我们用来思想思想的能力，也就是我们用来思想的能力，都是同一种
能力。如果我们怀疑我们思想人生、宇宙的能力、我们也有同样的理由怀疑我们思想思想的
能力。
　　宗教也和人生有关系。每种大宗教的核心都有一种哲学。事实上，每种大宗教就是一种
哲学加上一定的上层建筑，包括迷信、教条、仪式和组织。这就是我所说的宗教。
      </pre> 
    </asp:Panel>
            <cc1:HoverMenuExtender ID="hm1" runat="server" TargetControlID="lnkClose" PopupControlID="xmlClose" PopupPosition="Bottom" />
        <cc1:HoverMenuExtender ID="hm2" runat="server" TargetControlID="lnkShow" PopupControlID="xmlShow" PopupPosition="Bottom" />

要点是：
 1.实用脚本来获取页面上的信息 
 2.对服务器端控件的封装return false
 3.HoverMenuExtender再次扩展功能