C# 我想加载具有幻灯片效果的网站页面_C#_Asp.net_Jquery_Webforms_Umbraco

C# 我想加载具有幻灯片效果的网站页面

c# asp.net jquery umbraco

C# 我想加载具有幻灯片效果的网站页面,c#,asp.net,jquery,webforms,umbraco,C#,Asp.net,Jquery,Webforms,Umbraco,我想加载具有类似幻灯片效果的网站页面。这意味着当您单击菜单元素时，页面会随着幻灯片效果而改变。我使用Umbraco CMS、ASP.NET Web表单和C#NET。我怎么做请帮帮我我的主页的一部分是： <form id="AbniyehMainForm" runat="server"> <div id="MasterMaster" style="width: 100%;"> <div>

我想加载具有类似幻灯片效果的网站页面。这意味着当您单击菜单元素时，页面会随着幻灯片效果而改变。我使用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>

您需要使用客户端javascript效果，最有可能是jQuery，使用ajax加载页面，然后在加载页面后将其滑入。我发现这个看起来可以满足你的需求，这是一个来自


$（文档）.ready（函数（）{
$（“body”）.css（“display”、“none”）；
$（“正文”）。fadeIn（2000年）；
$（“a.transition”）。单击（函数（事件）{
event.preventDefault（）；
linkLocation=this.href；
$（“正文”）。淡出（1000页）；
});
函数重定向页面（）{
window.location=linkLocation；
}
});

下面是如何通过ajax从中加载页面


加载演示
身体{
字体大小：12px；
字体系列：Arial；
}
页脚导航：
$（“#新导航”）.load（“/#jq”）；

<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>

    <!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>