javascript - 网站加载前的欢迎屏幕(点击进入)[Splash Screen]

Question

如何在我的网站上创建欢迎屏幕？例如，当用户单击进入网站时，我有一个图像和一个显示“ENTER”的链接。我该怎么做？ 此外，如果可能，使用 Javascript 或 JQuery，当用户单击“ENTER”时，是否可以从初始屏幕交叉淡入淡出到网站？

目前我还没有任何代码。

Answer 1

您可以在第一次访问时将启动画面放在网站顶部的 div 中，当用户单击它(或“输入”链接)时，将其淡化为:

 <div id="splashscreen">
    <h2>Welcome !</h2>
    Take a look at our new products, blablabla
    <img src="http://i.telegraph.co.uk/multimedia/archive/02182/kitten_2182000b.jpg" />

    <a href="#" class="enter_link">Enter on the website</a>
</div>

只需 3 行 jQuery:

 $('.enter_link').click(function() { 
        $(this).parent().fadeOut(500);
 });

splashscreen div 需要占据整个可用空间并有一个​​背景来隐藏实际内容。 JSFiddle 示例:http://jsfiddle.net/5zP3Q/

请注意，闪屏应该只在第一次访问时显示。为此，在服务器端使用 session 和 cookie 来决定是否需要显示这部分代码。