天天看点

AnimationExtender控件

功能:

        用来美化、装饰网站等。

属性:

         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”,其中两个动画控件有着相同的属性,属性内容如下:

     Fps:帧/秒的显示速度。

    minimumOpacity:最小透明度。 

4.可伸缩的动画效果

    本例要实现的效果是,当单击Panel时,变化Panel的高度和宽度。这需要使用“Resize Animation”动画控件。其属性主要有5个:

      duration:动画效果的时间间隔。

    width:变化后的宽度。

     height:变化后的高度。

    unit:高度和宽度的单位,通常为“px”。

代码实例:

AnimationExtender控件

<body onload="focus();">

AnimationExtender控件

  <div class="banner">

AnimationExtender控件

    <a href="http://abcdwxc.cnblogs.com/" target="_blank"> AnimationExtender控件的使用------王晓成的博客

AnimationExtender控件

    </a>

AnimationExtender控件

  </div>

AnimationExtender控件

  <div class="description">

AnimationExtender控件

    请单击,移到上面,及移出<strong>“请按下我!”</strong>,来看看它会有什么样的变化。

AnimationExtender控件
AnimationExtender控件

  <p />

AnimationExtender控件

  <form id="form1" runat="server">

AnimationExtender控件

    <div>

AnimationExtender控件

      <asp:ScriptManager ID="ScriptManager1" runat="server">

AnimationExtender控件

      </asp:ScriptManager>

AnimationExtender控件

      <ajaxToolkit:AnimationExtender ID="AE"

AnimationExtender控件

                                     runat="server"

AnimationExtender控件

                                     TargetControlID="myPanel">

AnimationExtender控件

        <Animations>

AnimationExtender控件

            <OnClick>

AnimationExtender控件

              <FadeOut Duration="2" Fps="10" />

AnimationExtender控件

            </OnClick>

AnimationExtender控件

            <OnMouseOver>

AnimationExtender控件

            <Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" />

AnimationExtender控件

            </OnMouseOver>

AnimationExtender控件

            <OnMouseOut>

AnimationExtender控件

                <Color Duration=".2"  PropertyKey="color" StartValue="#000000" EndValue="#FFFFFF" />

AnimationExtender控件

            </OnMouseOut>

AnimationExtender控件

        </Animations>

AnimationExtender控件

      </ajaxToolkit:AnimationExtender>

AnimationExtender控件

    </div>

AnimationExtender控件

    <div align="center">

AnimationExtender控件

      <asp:Panel ID="myPanel" runat="server" style="cursor:pointer;">

AnimationExtender控件

        请按下我!

AnimationExtender控件

      </asp:Panel>

AnimationExtender控件
AnimationExtender控件

  </form>

AnimationExtender控件

</body>

博客园大道至简

<a href="http://www.cnblogs.com/jams742003/" target="_blank">http://www.cnblogs.com/jams742003/</a>

转载请注明:博客园

继续阅读