Question

因此，我在MVC中有一个项目，我想添加一个简介页面，以在加载网站时显示带有动画的徽标。我希望对它进行计时，例如，它出现动画，然后由他自己重定向到主页。我该怎么做？我必须更改路线吗？

Answer 1

在您的情况下，您希望为网页添加类似加载程序的内容，因此当您浏览主页时，它首先出现，为此，您必须设置一个div，然后将其z-index置于主页顶部，然后放置sone然后将其中的动画设置为该div的超时值，使其在特定时间（例如5秒后）消失（显示：无/不透明度：0）。然后一切都会如您所愿。

============================================================================
Here is an example of a jQuery library called
//jpreLoader
============================================================================
<!DOCTYPE html>
<html>
<head>
 <title>Pre Loader Example</title>
 <style>
#jpreOverlay,
#jpreContent {
    background-color: #f4711f;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99999;
}

#jpreSlide{
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
}

#jpreLoader {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
}

#jprePercentage {
    width: 50px;
    height: 50px !important;
    line-height: 50px;
    position: absolute !important;
    text-align: center;
    left: 50%;
    top: 55%;
    margin: -25px 0 0 -25px;
    z-index: 999999;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #fff;
}

#bouncer {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 11;
    margin: -60px 0 0 -40px;
    width: 70px;
    height: 70px;
    background: url(yourImage.jpeg) no-repeat;


    -webkit-animation: bounce 1s infinite forwards;
    -moz-animation: bounce 1s infinite forwards;
    -ms-animation: bounce 1s infinite forwards;
    animation: bounce 1s infinite forwards;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

 </style>
</head>
<body>
<!-- Pre Loader Section -->
<div>
  <section id="jpreContent">
    <div id="bouncer"></div>
  </section>
</div>
<!-- Intro -->
  <section id="firstPage">
    <p this is main page</p>
  </section>

<!-- Scripts -->
<!-- the main jQuery version is 2.1.0 - you can use any version that is compatible with -->
<script src="jquery.min.js" type="text/javascript"></script>
<!-- the preloader library  -->
<script src="jpreloader.min.js" type="text/javascript"></script>

<!-- this piece of code can be set in here or any external *js file -->
<script>

$(document).ready(function() {
        $('body').jpreLoader({
            splashID : "#jpreContent",
            showSplash : true,
            showPercentage : true,
            autoClose : true,
            splashFunctin: function() {
                $('#bouncer').animate({
                        'opacity' : 1
                    }, 500, 'linear'
                );
            }
        });
    });

</script>

</body>
</html>

您可以在下面的链接中找到演示和完整文档： https://github.com/kennyooi/jpreloader

如何在主页之前添加定时介绍页面？

1 个答案: