我想要这样,在加载我的页面时,应该有一个带有白色字母的黑屏。3 秒后它必须解散并且主页将可见。
如何使用 JavaScript 或 jQuery 做到这一点?
我想要这样,在加载我的页面时,应该有一个带有白色字母的黑屏。3 秒后它必须解散并且主页将可见。
如何使用 JavaScript 或 jQuery 做到这一点?
首先,您需要一个适合该任务的 HTML 结构。作为兄弟的内容容器和覆盖容器可以很好地用于此目的。
示例 HTML
<div id="overlay">
<p>Please wait while something wonderful happens</p>
</div>
<div id="content">
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
jQuery
要使用 jQuery 完成此操作,请先隐藏您的内容容器并使用内置.fadeOut
方法。确保提供一个回调,在完成时显示您的内容容器。这是一个例子:
$(document).ready(function () {
var showContent = function showContent() {
//callback that fires once animation is complete.
$('#content').show();
}, hideOverlay = function hideOverlay() {
$('#overlay').fadeOut('slow', showContent);
};
//after 3000 milliseconds (=3 seconds), call the hideOverlay function
window.setTimeout(hideOverlay, 3000);
});
JavaScript
要使用普通的 JavaScript 来做到这一点,您需要opacity
随着时间的推移调整元素的样式(window.setInterval
这里是您的朋友。)这是一个示例:
window.onload = function () {
var JSShowContent = function JSShowContent() {
var content = document.getElementById('content');
content.style.display = 'block';
}, JSHideOverlay = function JSHideOverlay () {
var overlay = document.getElementById('overlay'),
opacity = 1,
interval = 0,
rate = 5; //rate is in milliseconds
overlay.style.opacity = opacity; //set initial opacity as it defaults to ""
interval = window.setInterval(function () {
opacity -= 0.01; //decrement opacity
overlay.style.opacity = opacity;
if (opacity <= 0) {
window.clearInterval(interval);
overlay.style.display = 'none';
JSShowContent();
}
} , rate);
};
//after 3000 milliseconds (=3 seconds), call the hideOverlay function
window.setTimeout(JSHideOverlay, 3000);
};
现场演示
这是一个你可以玩的小提琴:http: //jsfiddle.net/dYrsP/
只需将函数更改window.setTimeout
为hideOverlay
并重新运行它即可查看 jQuery 版本。
假设您的黑屏是 id 为“黑屏”的 div
<div id="black-screen">
<!-- Black screen and white letters goes here -->
</div>
在您的文档中的某处放置
<script>
function hideBlackScreen(){
$("#black-screen").hide('slow');
}
$(function(){
setTimeout(hideBlackScreen, 3000);
});
</script>
如果您愿意,我可以发布一些 jsfiddle 示例
这是关于 hide() 函数链接的 jQuery Docs
要拥有全屏 div:
http://andrewpeace.com/css-full-screen-div.html
<body style="height:100%">
<div style="width:100%;height:100%;
position:absolute;
top:0;left:0;
background: none repeat scroll 0 0 black;
vertical-align: middle;
text-align: center;">
<font style="color:white">My text</font>
</div>