网站加载前的欢迎画面（点击进入）[启动画面] [英] Welcome screen before website loads (Click to enter) [Splash Screen]

问题描述

我如何在我的网站上创建欢迎屏幕？例如，我有一个图像和一个链接，当用户点击进入网站时出现ENTER。我会怎么做？
另外如果可能的话用Javascript或JQuery，当用户点击ENTER时，是否可以从启动画面交叉淡入网页？

How would I create a welcome screen on my website? For example, I have an image and a link that says "ENTER" when the user clicks enter the website appears. How would I do that? Also if possible with Javascript or JQuery, When the user clicks "ENTER", Would it be possible to crossfade from the splash screen to the website?

我

推荐答案

您可以将您的飞溅屏幕放在您的网站顶部的div上第一次访问，当用户点击它时（或在输入链接），淡化它：

You can put your splashscreen in a div on top of your website at the first visit and when the user click on it (or on the "Enter" link), fade it with:

 <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：

And with just 3 lines of jQuery:

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

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

The splashscreen div need to take the whole space available and have a background to hide the actual content. JSFiddle example: http://jsfiddle.net/5zP3Q/

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

Be aware that the splashscreen should be display on the first visit only. For that, use sessions and cookies on server side to decide if you need to display this portion of code or not.

这篇关于网站加载前的欢迎画面（点击进入）[启动画面]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！