javascript - 创建 Onload 淡入小部件

Question

我花了几个小时寻找可以制作淡入框的代码，但无济于事。这几乎是如何工作的，当人们访问我的页面时，几秒钟后页面将变得不透明，然后页面中央会打开一个“x”דy”框，显示我选择的一些 html，例如链接到注册页面或其他内容。它会使用一些 jQuery 之类的东西。

Answer 1

我不确定这是否是您想要的，但这将允许您在当前页面上方显示一个简单的启动屏幕。

我在这里创建了一个示例 http://jsfiddle.net/maurice_butler/5c8zN/

假设您的页面如下所示。

<div class="box">Your Login / splash info goes here</div>


<div>
    This is your original page content. 

    This is the stuff I assume you want to be behind the splash div.
</div>

​添加以下 CSS 类将使您能够创建在内容上显示启动屏幕的平滑过渡。

.box{
    background: #000000;
    color: #666;
    opacity: 0;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.splash{
    opacity: .9;
    padding: 50%;
    -webkit-transition: opacity 1s 1s, -webkit-transform 5s;
    -moz-transition:    opacity 1s 1s,    -moz-transform 5s;
    -ms-transition:     opacity 1s 1s,     -ms-transform 5s;
    -o-transition:      opacity 1s 1s,      -o-transform 5s;
    transition:         opacity 1s 1s,         transform 5s;

    -webkit-transform: translateY(0px);
    -moz-transform:    translateY(0px);
    -ms-transform:     translateY(0px);
    -o-transform:      translateY(0px);
    transform:         translateY(0px);

}

要触发效果，请将“splash”类添加到您的包含 div 中。 (延迟5秒来展示想法。

setTimeout(function() {
    $('.box').addClass('splash')
}, 5);​

您可以进一步自定义 CSS 来更改斜杠屏幕的颜色/大小和整体外观。