2013-09-22 56 views
1

我想加载与幻灯片效果相似的网页页面abnieh。 这意味着当你点击菜单元素时,页面会随着滑动效果而变化。 我使用Umbraco CMS,ASP.NET Web窗体和C#.NET。 我该怎么办?我想加载幻灯片效果的网站页面

请帮帮我。

我的主母版页的一部分:

<form id="AbniyehMainForm" runat="server"> 
     <div id="MasterMaster" style="width: 100%;"> 
      <div> 
       <asp:ContentPlaceHolder runat="server" ID="ContentPlaceHolderDefault"> 
        <div> 
         <uc1:HeaderControl runat="server" ID="HeaderControl" /> 
        </div> 
        <div> 
         <asp:ContentPlaceHolder runat="server" ID="homePageContent"></asp:ContentPlaceHolder> 
        </div> 
        <div> 
         <asp:ContentPlaceHolder runat="server" ID="aboutUsContent"> 
         </asp:ContentPlaceHolder> 
        </div> 
        <div> 
         <asp:ContentPlaceHolder runat="server" ID="serviceSectionContent"> 
         </asp:ContentPlaceHolder> 
        </div> 
        <div> 
         <asp:ContentPlaceHolder runat="server" ID="projectSectionContent"> 
         </asp:ContentPlaceHolder> 
        </div> 
        <div> 
         <asp:ContentPlaceHolder runat="server" ID="newsSectionContent"> 
         </asp:ContentPlaceHolder> 
        </div> 
        <div> 
         <asp:ContentPlaceHolder runat="server" ID="contactUsSectionContent"> 
         </asp:ContentPlaceHolder> 
        </div> 
       </asp:ContentPlaceHolder> 
       <div> 
        <asp:ContentPlaceHolder runat="server" ID="languagesContent"> 
        </asp:ContentPlaceHolder> 
       </div> 
       <div> 
        <asp:ContentPlaceHolder runat="server" ID="menuContent"> 
        </asp:ContentPlaceHolder> 
       </div> 
      </div> 
     </div> 
    </form> 

回答

1

您将需要使用客户端的JavaScript效果,最有可能与jQuery和使用AJAX加载网页,然后在之后它加载滑动页面。我发现这个Project,看起来它会做你想做的,这里是一个tutorial的样本。


<script type="text/javascript"> 
$(document).ready(function() { 
    $("body").css("display", "none"); 

    $("body").fadeIn(2000); 

    $("a.transition").click(function(event){ 
     event.preventDefault(); 
     linkLocation = this.href; 
     $("body").fadeOut(1000, redirectPage);  
    }); 

    function redirectPage() { 
     window.location = linkLocation; 
    } 
}); 
</script> 

这里是你如何通过AJAX从jQuery website加载页面。

<!doctype html> 
    <html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>load demo</title> 
     <style> 
     body { 
     font-size: 12px; 
     font-family: Arial; 
     } 
     </style> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    </head> 
    <body> 

<b>Footer navigation:</b> 
<ol id="new-nav"></ol> 

<script> 
$("#new-nav").load("/ #jq-footerNavigation li"); 
</script> 

</body> 
</html>