AJAX 手风琴结合 jQuery 剥离效果和 CSS 淡入

• 下载演示/源代码 - 3.2 MB 

介绍 

我最初对 AJAX 和 jQuery 并不感兴趣，好吧，我的错，因为 AJAX 和 jQuery 提供的功能和效果非常棒。

在本文中，我将向您展示如何使用以下效果创建一个简单的首页。所有这些效果你都可以通过 Google 找到，我只是修改它们并将它们组合在一起作为教程。所有功劳归于原始作者。

• AJAX 手风琴效果
• 鼠标悬停时的 CSS 淡入淡出效果
• jQuery 剥离效果

所需文件

为了使所有效果正常工作，您需要以下文件

• AjaxControlToolkit.dll
• jquery-1.5.2.min.js
• jquery.peelback.js

最棒的是，以上所有文件都包含在本文章的源代码文件中。

Using the Code

我基于母版页创建了页面，以防您需要使用相同的模板创建更多页面。

手风琴效果

对于手风琴效果，设置对AjaxControlToolkit.dll的引用，然后将ToolkitScriptManager和Accordion控件拖到您的子页面上。并设置以下值。

<asp:Accordion ID="Accordion1" runat="server" CssClass="accordion" 
     HeaderCssClass="accordionHeader" 
     HeaderSelectedCssClass="accordionHeaderSelected" 
     ContentCssClass="accordionContent"  FadeTransitions="false" FramesPerSecond="40" 
     TransitionDuration="250" AutoSize="None" SelectedIndex="1" 
     RequireOpenedPane="false" SuppressHeaderPostbacks="true" Height="240px" 
     Width="500px"  >
    <Panes>
        <asp:AccordionPane runat="server" ID="Pane1" >
            <Header>Click here</Header>  
            <Content>  
               <div> THIS IS WHERE ALL THE CONTENTS WOULD GO INTO </div>
            </Content>
        </asp:AccordionPane>
    </Panes>
</asp:Accordion>

以上代码需要与以下 CSS 配合使用才能获得格式，您可以根据需要进行更改

.accordionHeader {  
    border: 0px solid #2F4F4F;  
    color: white;  
    background-color: black;  
    font-family: Verdana;  
    font-size: 12px;  
    font-weight: bold;  
    padding: 5px;  
    margin-top: 5px;  
    cursor: pointer;  
    text-align:center;
}  
  
.accordionHeaderSelected {  
    border: 0px solid #2F4F4F;  
    color: white;  
    background-color: black;
    font-family: Verdana;
    font-size: 12px;  
    font-weight: bold;  
    padding: 5px;  
    margin-top: 5px;  
    cursor: pointer;  
}  
  
.accordionContent {  
    background-color: black;  
    border: 0px dashed black;  
    border-top: none;  
    padding: 5px;  
    padding-top: 10px;  
   text-align:left;
   font-family: Verdana;
}

最终效果如下所示。

 

带有“点击此处”的部分是手风琴放置的位置。单击它后，您将获得以下带有平滑滑动效果的内容

淡入淡出效果

为了使鼠标悬停在“我的网站”部分及下方时发生淡入淡出效果，请将以下代码添加到 CSS 文件中

.accordion   
{
   text-align:center;
   margin-left:26%;
   opacity:0.7;
   filter:alpha(opacity=70); /* For IE8 and earlier */
}  
 .accordion:hover
  {
      opacity:1.0;
    filter:alpha(opacity=100); /* For IE8 and earlier */ 
}

剥离效果

对于剥离效果，它看起来好像你可以剥离背景。你只需要将代码放置在母版页的 Body 部分即可

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.peelback.js"></script>
<script type="text/javascript">
$(function () {
$('body').peelback({
adImage: 'images/peel-ad.png',
peelImage: 'images/peel-image.png',
clickURL: 'http://yoursettingspage.aspx',
smallSize: 30,
bigSize: 300,
gaTrack: false,
gaLabel: '',
autoAnimate: true,
debug: false
});
});
</script>

这将为您留下以下内容。clickURL链接在单击以下剥离后的“欢迎”时被激活

希望您喜欢调整外观和效果。另外，图片文件夹中有一个名为header-bg1.jpg的蓝色横幅，献给那些不喜欢红色的人。

历史  

• V1.0 – 2013年2月1日
• 2013年2月4日更新 - 图片已更新。