AnimationExtender控件属性

最新推荐文章于 2012-04-23 22:16:59 发布

bingboyao

最新推荐文章于 2012-04-23 22:16:59 发布

阅读量936

点赞数

分类专栏： Ajax介绍文章标签： animation server parallel asp filter div

Ajax介绍专栏收录该内容

0 篇文章 0 订阅

订阅专栏

属性：
         OnLoad：表示要触发的事件是加载页面时。
         OnClick：表示要触发的事件是单击控件时。
         OnMouseOver：表示要触发的事件是鼠标滑过时。
         OnMouseOut：表示要触发的事件是鼠标移走时
         OnHoverOver：与OnMouseOver类似，对特定控件而言。
         OnHoverOut：与OnMouseOut类似，对特定控件而言。

1．变色颜色的动画效果
        本例要实现的是当鼠标滑过Panel时，Panel的颜色发生变化，当鼠标移走时，Panel的颜色又发生了变化，这需要“Color Animation”。Color Animation动画的属性主要有4个：
     Duration：动画显示效果的时间间隔。
     PropertyKey：要设置的属性值。
     StartValue：属性的开始值。
     EndValue：属性的结束值。

2．淡入淡出合并的动画效果
    淡入淡出效果是网站中经常看到的效果，本例使用“Fade Animation”来实现这样的效果，“Fade Animation”的属性主要有4个：
     duration：动画效果的时间间隔。
     Fps：帧/秒的显示速度。
     maximumOpacity：最大透明度。
     minimumOpacity：最小透明度。

3．淡入和淡出分开的动画效果
    上一个实例中，当鼠标滑过时，其实是完成两步：淡入和淡出。通常在实际应用中，淡入和淡出是分开的。本例要演示的是当鼠标滑过时，实现淡入效果，当鼠标移出时，实现淡出效果。
    此功能需要使用“FadeIn Animation”和“FadeOut Animation”，其中两个动画控件有着相同的属性，属性内容如下：
     duration：动画效果的时间间隔。
     Fps：帧/秒的显示速度。
     maximumOpacity：最大透明度。
    minimumOpacity：最小透明度。

4．可伸缩的动画效果
    本例要实现的效果是，当单击Panel时，变化Panel的高度和宽度。这需要使用“Resize Animation”动画控件。其属性主要有5个：
      duration：动画效果的时间间隔。
     Fps：帧/秒的显示速度。
    width：变化后的宽度。
     height：变化后的高度。
    unit：高度和宽度的单位，通常为“px”。

文章来找：http://www.cnblogs.com/abcdwxc/archive/2007/10/26/939054.html

实例取自浪曦网的视频

<head runat="server">
<title>AJAX控件之Animation</title>
   <script type="text/javascript">
        function Cover(bott,top)
        {
            var location=Sys.UI.DomElement.getLocation(bott);
            top.style.position='absolute';
            top.style.top=location.y+'px';
            top.style.left=location.x+'px';
            top.style.height=bott.offsetHeight+'px';
            top.style.width=bott.offsetWidth+'px';
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <asp:Button ID="btnInfo" runat="server" Text="看我炫不炫" Width="121px" OnClientClick="return false" style="left: 350px; position: absolute; top: 255px" /><br />
             </div>
            <div id="flyout" style ="display:none; width:250px; z-index:2; background-color:#FFFFFF; border:solid 1px #D0D0D0;"></div>
        <div id="info" style="border-right: #3300cc 1px solid; border-top: #3300cc 1px solid;
            border-left: #3300cc 1px solid; width: 166px; border-bottom: #3300cc 1px solid;
            height: 187px; background-color: #ffffcc; text-align: center; filter: progid:dximagetransform.microsoft.alpha(opacity=50); display: none;">
            <div id="btnCloseParent" style="float: right; width: 23px; height: 23px; font-weight: bold; color: silver; background-color: #ffffff; filter: progid:dximagetransform.microsoft.alpha(opacity=50);">
                <asp:LinkButton ID="btnClose" runat="server" OnClientClick="return false">X</asp:LinkButton></div>
            <br />
            浪曦在线调查<br />
            <br />
            <asp:LinkButton ID="lnkQuestion" runat="server" OnClientClick="return false">问题</asp:LinkButton>、<asp:LinkButton
                ID="lnkAnswer" runat="server" OnClientClick="return false">多选项</asp:LinkButton><br />
            <br />
            请将您的答案发<br />
            往浪曦官方邮箱<br />
            langsin@e172.com<br />
            再次感谢您的支持！</div>
        <cc1:AnimationExtender ID="openAnimation" runat="server" TargetControlID="btnInfo">
            <Animations>
                <OnClick>
                    <Sequence>
                        <EnableAction Enabled="false" />
                        <ScriptAction Script="Cover($get('btnInfo'),$get('flyout'));" />
                        <StyleAction AnimationTarget="flyout" Attribute="display" Value="block" />

                        <Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
                            <Move Horizontal="166" Vertical="-50" />
                            <Resize Width="166" Height="183" />
                            <Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" />
                        </Parallel>

                        <ScriptAction Script="Cover($get('flyout'),$get('info'));" />
                        <StyleAction AnimationTarget="info" Attribute="display" Value="block" />
                        <FadeIn AnimationTarget="info" Duration=".3" />
                        <StyleAction AnimationTarget="flyout" Attribute="display" Value="none" />

                        <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" MaxinumOpacity=".5" />
                        </Parallel>
                    </Sequence>
                </OnClick>
            </Animations>
        </cc1:AnimationExtender>
         
        <cc1:AnimationExtender ID="closeAnimation" runat="server" TargetControlID="btnClose">
            <Animations>
                <OnClick>
                    <Sequence>
                        <FadeOut AnimationTarget="info" />
                        <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>
         <br />
        <asp:Panel ID="showQuestion" runat="server" BackColor="#C0FFFF" BorderColor="Red"
            BorderWidth="1px" Height="73px" Width="147px">
            <br />
            您是如何知道浪<br />
            曦视频在线的？</asp:Panel>
        <asp:Panel ID="showAnswer" runat="server" BackColor="#C0FFC0" BorderColor="Blue"
            BorderWidth="1px" Height="89px" Width="146px">
            <br />
            Ａ博客<br />
            Ｂ搜索引擎<br />
            Ｃ朋友介绍</asp:Panel>
        <cc1:HoverMenuExtender ID="hmQuestion" runat="server" TargetControlID="lnkQuestion" PopupControlID="showQuestion" PopupPosition="bottom">
        </cc1:HoverMenuExtender>
        <cc1:HoverMenuExtender ID="hmAnswer" runat="server" TargetControlID="lnkAnswer" PopupControlID="showAnswer" PopupPosition="bottom">
        </cc1:HoverMenuExtender>
    </form>
</body>

bingboyao

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AnimationExtender控件属性

属性： OnLoad：表示要触发的事件是加载页面时。 OnClick：表示要触发的事件是单击控件时。 OnMouseOver：表示要触发的事件是鼠标滑过时。 OnMouseOut：表示要触发的事件是鼠标移走时 OnHoverOver：与OnMouseOver类似，对特定控件而言。 OnHov
复制链接

扫一扫