Question

我想加载类似abnieh的幻灯片效果的网站页面。这意味着当您单击菜单元素时，页面将随幻灯片效果而变化。我使用Umbraco CMS，ASP.NET Web Form和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>

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

以下是通过jQuery website中的ajax加载页面的方法。

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

我想加载带有幻灯片效果的网页

1 个答案: