Question

好的，我已经完成了20个不同的stackexchange答案来解决这些问题，而且我仍然无法解决它，所以它是关于我问的时间，希望有人可以指出我脱离了这些树林：

我正在创建一个简单的网站，我想制作一个包含加载/进度条的覆盖屏幕，并且在它消失之前最多只进行3秒的过程并显示该网站。我还想在栏的正上方添加一个标志。我看了一些阿拉伯语的视频，但它已经失控了，我不知道他在说什么，但我想我可以尝试他的代码并对其进行修改，但这并不起作用。

另外，我在代码中找到了一个jumbotron＆＃34; jumbotronTwo＆＃34;，基本上它应该做的是当你点击菜单图标并出现下拉菜单时，你单击其中一个选项，然后菜单应向后滚动并显示jumbotron。到目前为止，我已经能够制作jumbotron并对其进行着色，调整大小，填充文本等等。我尝试使用一些javascript和jquery使其显示并消失＆＃34; onclick＆＃34; ，但似乎没有工作，我开始认为可能它与我所拥有的图书馆有关？我不知道什么可以胜过它，所以我需要有人来看看代码。

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Twenty Eight Interiors</title>
        <meta name="description" content="Wiredwiki App">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">


    </head>

我认为这些显示很重要，如果我忘记了某些图书馆或某些东西，你可以指出它。我也有一些CSS但是把它剪掉了，如果你需要看到它我也可以展示它。这是＆＃34;肉和土豆＆＃34;：

    <body>
        <!-- jumbotron-->

        <div class="jumbotron" id="jumbotronOne">
            <div class="container text-center">
                <img src="Untitled.png">
            </div>
        </div>

    <!-- Navbar -->
        <nav class="navbar navbar-inverse" id="my-navbar" style="font-family:Webdings;">
            <div class="container">
                <div class="navbar-header" id="oneDiv">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" id="iconButton">
                        <span class="glyphicon glyphicon-menu-hamburger"></span>
                    </button>

                <a href="" class="navbar-brand"><font color="white">MENU</font></a>
                </div><!-- Navbar Header -->
                <div class="collapse navbar-collapse" id="navbar-collapse" align="center">
                    <ul class="nav navbar-nav" id="firstOne">
                        <li><a href="#" id="designProcess" role="button">Design Process</a></li>
                        <li><a href="#" id="profile">Profile</a></li>
                        <li><a href="#" id="contactInfo">Contact Info</a></li>
                    </ul>
                    <ul class="list-inline" id="secondOne">
                        <li><a href="#" class="socialicon"><img src="facebook.png" hspace="30"></a></li>
                        <li><a href="#" class="socialicon"><img src="twitter.png" hspace="30"></a></li>
                        <li><a href="#" class="socialicon"><img src="instagram.png" hspace="30"></a></li>
                    </ul>
                </div>
            </div><!-- End Container img src="twitter.png"-->
        </nav><!-- End navbar -->

      <div class="jumbotron" id="jumbotronTwo">
      <div class="container">
      <h2>Headline goes here in one, two or three lines like this</h1>
      <p>...</p>
      </div>
      </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </body>
    </html>

我甚至在使用javascript为glyphicon工作时遇到了问题，我希望它在我点击它时再次改变;我不知道我做错了什么，尝试过很多来自stackexchange的潜在解决方案，但这也似乎指出它是别的东西。

提前致谢

Answer 1

如果它只是一个启动页面，那么在你的身体顶部添加一个div并将你现有的页面包装在一个div中，显示：none ...

<body>
    <div id="loader">
        <h4>Logo and progress bar here...</h4>
    </div>
    <div id="your-page" style="display:none">
        <!--Your existing content here...-->
    </div>

然后添加一点jquery ......

jQuery(document).ready(function(){
    $( "#loader" ).delay(800).fadeOut(400, function(){
        $( "#your-page" ).fadeIn(400);
    });  
});

参见工作示例here。

如果您想轻松设置进度条的动画，我建议this plugin。

对于glyphicon，请使用以下js ...

$( "#iconButton" ).click(function(){
    $(this).html('<span class="glyphicon glyphicon-menu-cheeseburger"></span>');
});

显然用你想要使用的任何图标替换芝士汉堡！请看这个位的小提琴here（没有实际的图标，但你应该明白这一点。）

Answer 2

我看到你正在加载jQuery 1.11.2和2.1.3，这也增加了额外的加载时间。这当然不好，我建议只使用3.1.1

在这种情况下，@ Devvox第二代码需要更新如下，因为不再支持(document).ready。

$(function(){
    $( "#loader" ).delay(800).fadeOut(400, function(){
        $( "#your-page" ).fadeIn(400);
    });  
});

Bootstrap：覆盖加载屏幕+切换jumbotron

2 个答案: