网站加载前的欢迎屏幕(点击进入)[启动画面]

Question

如何在我的网站上创建欢迎屏幕？例如,当用户点击进入网站时,我有一个图像和一个显示"ENTER"的链接.我该怎么办？如果可能的话,使用Javascript或JQuery,当用户点击"ENTER"时,是否可以从启动画面交叉淡入到网站？

我还没有任何代码.

Answer 1

您可以在第一次访问时将您的启动画面放在网站顶部的div中,当用户点击它时(或在"Enter"链接上),将其淡化为:

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

请注意,只有在第一次访问时才会显示启动画面.为此,请在服务器端使用会话和cookie来决定是否需要显示这部分代码.

Answer 2

我将建议两种方法来做到这一点,但我强烈建议你在JS关闭时设计它.

选项一包括实际制作启动页面(单独的文件) - 换句话说,您的index.html或您的主要登陆文件只包含该标记,并且不需要javascript.这有缺点:

- 所有用户都可以访问此页面,除非你做了一些非常糟糕的事情,例如制作JS重定向等等.对于以前访问过该网站的用户来说真的很棒,因为他们必须点击才能访问该网站,除非你添加确切的JS重定向.-Bad for SEO(boooo)

选项二包括使您的启动页面实际上成为主页面的一部分.这是一个快速而肮脏的部署示例,但是我已经在大型项目上实现了它并且它运行得非常好.基本上,制作一个"泼溅"div和一个"后溅"div.为它们分配两个ID(可能使用那些确切的字符串),这样你就可以使用JS来操作它们.后飞溅div应该(哦,上帝,他会说它)包含内联样式的显示:无.这是目的,所以不要有过敏反应 - 即使用户正在等待CSS加载它仍然是不可见的.

基本上,当用户单击"splash"部分中的"continue"按钮时,您可以使用JS直接将"splash"div的可见性切换为none,将"postsplash"div切换为block,或者执行淡入淡出效果.淡入淡出效果需要在"splash"div上进行绝对定位,以便在淡入淡出期间其他内容可以出现在窗口的顶部.

这种方法的好处是多种多样的,但是如果适用的话,你必须使用JS来解决这些问题.我会首先为非JS机器构建它(这类似于美国用户的1%) - 换句话说,"继续"按钮将是一个链接,用于使用可以加载页面的参数刷新页面"后飞溅"可见,"飞溅"显示:无.只有在运行动态服务器环境时才有可能.如果您没有运行PHP或ASP或其他东西,那么您可以让它像选项1一样.如果用户有javascript,那么只需调用preventDefault()方法就可以调用preventDefault()方法,以便页面不会刷新,而是执行淡入淡出以显示内容.

这是很多信息,所以如果你需要任何澄清让我知道,但这种方法对我来说对企业级项目很有用而且它的超级兼容性在于它不会破坏你的网站不支持JS的机器(意味着他们是旧的,用户已将其禁用,网络已禁用,等等).是为了逐步加强!

为了让用户真正感到高兴,您还应该设置一个cookie,如果他们已经访问过该网站,将直接访问该页面内容.根据我的经验,用户并不是真的想要多次看到启动页面.