个人中心
gpt4 book ai didi

javascript - Bootstrap : overlay loading screen + toggle jumbotron

转载 作者：太空宇宙 更新时间：2023-11-04 13:52:47 25 4
gpt4 key购买 nike

好吧，对于这些问题中的每一个，我已经经历了大约 20 个不同的 stackexchange 答案，但我仍然无法解决它，所以现在是我问的时候了，希望有人能指出我走出这些困境:

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

此外，我在称为“jumbotronTwo”的代码中有一个超大屏幕，基本上它应该做的是当您单击菜单图标并出现下拉菜单时，您单击其中一个选项，然后菜单应该向后滚动并且应该出现超大屏幕。到目前为止，我已经能够制作 jumbotron 本身并为其着色、调整其大小、用文本填充它等，我尝试使用一些 javascript 和 jquery 使其出现和消失“onclick”，但似乎都没有用，我开始想这可能与我拥有的图书馆有关吗？我不知道有什么可以胜过它，所以我需要有人看一下代码。

    <!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，但把它剪掉了，如果你也需要看，我可以展示它。这是“肉和土 bean ”:

    <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 的潜在解决方案，但这似乎也表明这是另外一回事。

提前致谢

最佳答案

如果它只是一个初始页面，那么在你的正文顶部添加一个 div 并将你现有的页面包装在一个带有 display:none 的 div 中......

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

对于字形使用以下 js...

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

显然用您想要使用的任何图标替换芝士汉堡!见 fiddle here对于这一点(没有实际的图标，但你应该明白了)。

关于javascript - Bootstrap : overlay loading screen + toggle jumbotron，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28797509/

25 4 0
文章推荐： css - 使用 Flexslider 如何使控制箭头响应？
文章推荐： java - Spring 3在jsp View 中绑定(bind)对象到表单
文章推荐： c++ - 基于范围的for循环对性能有好处吗？
文章推荐： java - AspectJ 不与 @Before 一起使用
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com