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

1 回答 1

2

您将需要使用客户端 javascript 效果，最有可能使用 jQuery 并使用 ajax 加载页面，然后在加载后将页面滑入。我发现这个项目看起来会做你想做的事，这里是教程中的一个示例。

<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 网站通过 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>
于 2013-09-22T07:02:30.867 回答