//首先建立一个Button ID 为btninfo, 再建立一个 div id="flyout" 再建立一个div id="info"这里是显示详细信息
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AJAX控件之Animation</title>
<script type="text/javascript">
function Cover(bottom,top)
{
var location = Sys.UI.DomElement.getLocation(bottom);
top.style.position = 'absolute';
top.style.top=location.y+'px';
top.style.left=location.x+'px';
top.style.height=bottom.offsetHeight+'px';
top.style.width=bottom.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">关闭</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 />
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>
<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>
</html>
分享到：
相关推荐
在实际应用中，你可以利用它来实现诸如淡入淡出、滑动、旋转等常见的动画效果，甚至可以自定义复杂的动画序列。 使用Animation控件的步骤通常包括以下几个方面： 1. **引入AJAX工具包**：首先，在ASP.NET页面中...
总之，ASP.NET AJAX控件之Animation教程旨在帮助开发者快速掌握在Web应用中创建动态效果的技能，提升用户体验，同时也减轻服务器的压力。通过学习这个主题，你将能够自信地在你的ASP.NET项目中引入丰富的交互式动画...
开发者可以通过配置Animation控件来创建复杂的动画序列，比如淡入淡出、滑动、旋转等，所有这些都可以在客户端执行，减少了服务器的负担。 要使用ASP.NET AJAX Animation控件，你需要首先在页面中引用AJAX Toolkit...
Animation控件是AjaxControlToolkit中的一个重要组件，它允许开发者创建复杂的动画效果，如淡入淡出、移动、旋转等。虽然在Visual Studio 2005中，该控件不提供智能提示，但通过理解和掌握各个属性，开发者可以自由...
动画可以是简单的淡入淡出，也可以是更复杂的过渡效果。 6. **兼容性**：HoverMenu控件不仅适用于IE浏览器，也支持其他现代浏览器，如Firefox、Chrome和Safari，提供了一种跨平台的用户体验。 7. **易用性和可扩展...
Animation属性是ASP.NET AJAX控件库中的一个重要特性，主要用于创建复杂的用户界面动画效果。这个属性允许开发者为控件添加一系列连续的动作，如淡入淡出、滑动、旋转等，以增加Web应用的动态性和吸引力。以下是对...
Animation组件提供了灵活的方式来创建和控制页面元素的动画效果，包括淡入淡出、移动、旋转等。它基于Microsoft AJAX Library，利用UpdatePanel的异步更新机制，使得动画效果可以在不刷新整个页面的情况下实现。...
例如，使用`fadeIn()`和`fadeOut()`函数可以实现元素的淡入淡出效果；`slideToggle()`可以实现滑动显示或隐藏元素。在ASP.NET中，可以将jQuery库引用添加到页面头部，并在客户端脚本中调用这些函数。 此外，ASP.NET...
Microsoft AJAX Library提供了一套完善的动画系统，通过`Sys.UI.Animation`命名空间，开发者可以轻松创建平滑的过渡效果，如淡入淡出、移动、缩放等，使用户界面更加生动和吸引人。 数据绑定是另一个重要的主题，...
这种控件可能包含动态显示文本、图标、按钮等元素，并且可以自定义动画效果，如滑动、淡入淡出等。其目的是在不打断用户当前操作的情况下，提供一种轻量级的通知方式。 【标签】：“ASP.NET”是微软开发的一种...
2. Animation：提供动画效果，如淡入淡出、滑动等，为用户界面添加动态元素。 3. Calendar：一个可自定义的日期选择器，可以方便地插入到输入字段旁边，帮助用户输入日期。 4. CascadingDropDown：实现下拉列表的...
- **Animation Extender**：为控件添加动画效果，如淡入淡出、滑动等，提升用户体验。 - **AutoCompleteExtender**：自动完成文本框输入，常用于搜索框中快速提供匹配建议。 - **CalendarExtender**：为日期选择器...
这些动画可能是淡入淡出、滑动切换等效果，实现这些效果可能利用CSS的transition或animation属性，或者JavaScript库如GreenSock。 5. **数据绑定和API接口**： 开源项目可能提供数据绑定功能，允许开发者动态地从...
JQuery则简化了JavaScript的DOM操作，提供了更加简洁的API来实现图片轮显，例如使用`fadeOut()`和`fadeIn()`方法实现淡入淡出效果。 2. **CSS3实现**： CSS3引入了动画（Animation）和过渡（Transition）特性，...
4. CSS3动画：可能使用CSS3的`transition`或`animation`属性实现日历的动态效果，如滑动、淡入淡出等。 5. 响应式设计：使用媒体查询(`media queries`)确保日历在不同屏幕尺寸下都能正确显示。 6. 数据持久化：...
这通常涉及到用户界面（UI）的动态展示，如滑动、淡入淡出、缩放等，以提升用户体验和网站的视觉吸引力。 在ASP.NET中，可以使用JavaScript、jQuery或者自定义的CSS3动画来实现这些效果。JavaScript和jQuery提供了...
6. **Animation控件**：AjaxControlToolkit中的Animation控件允许您为Web页面元素添加复杂的动画效果，包括淡入淡出、移动、旋转等。 7. **整合jQuery**：从4.0版本开始，AjaxControlToolkit开始支持与jQuery的集成...
在链家网站中，jQuery可以用来快速实现页面的动态效果，比如滑动、淡入淡出等，同时也简化了跨浏览器的兼容性问题。通过jQuery，开发者可以使用简洁的语法来实现复杂的交互功能，提高开发效率。 5. **表单验证**：...
同时，CSS3的动画和过渡可以与jQuery相结合，实现平滑的页面元素变换，如淡入淡出、滑动效果等。 在"jQuery+HTML5+CSS3绚丽变换组合"这个项目中，开发者可能利用了以下技术组合： 1. **jQuery动画**：通过jQuery的...