因此,我在MVC中有一个项目,我想添加一个简介页面,以在加载网站时显示带有动画的徽标。 我希望对它进行计时,例如,它出现动画,然后由他自己重定向到主页。我该怎么做?我必须更改路线吗?
答案 0 :(得分: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