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

本文关键字：网站 幻灯片 加载 | 更新日期: 2023-09-27 18:32:21

我想加载具有类似 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>

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

你需要使用客户端的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>

以下是您如何通过 ajax 从 jQuery 网站加载页面。

    <!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>
相关文章：