网站加载前的欢迎画面（点击进入）[启动画面]
Posted
技术标签:
【中文标题】网站加载前的欢迎画面（点击进入）[启动画面]【英文标题】：Welcome screen before website loads (Click to enter) [Splash Screen] 【发布时间】：2014-01-16 09:47:00 【问题描述】：如何在我的网站上创建欢迎屏幕？例如，当用户单击进入网站时，我有一个图像和一个显示“ENTER”的链接。我该怎么做？ 此外，如果可能使用 javascript 或 JQuery，当用户单击“ENTER”时，是否可以从初始屏幕淡入淡出到网站？
我还没有任何代码。
【问题讨论】：
不是真正的答案，而是针对所有想要相同的初学者：在使用这个非常烦人的“功能”之前三思而后行。启动画面不是访问者在访问您的网站时看到的内容。 【参考方案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 来决定是否需要显示这部分代码。
【讨论】：
完美！谢谢！ :) ***.com/questions/4825683/… 或 php.net/setcookie 或任何你正在使用的东西。【参考方案2】：我将建议两种方法来做到这一点，但我强烈建议您将其设计为在 JS 关闭时工作。
选项一包括实际制作一个启动页面（一个单独的文件） - 换句话说，您的 index.html 或任何您的主登陆文件只包含该标记，并且不需要 javascript。这有缺点：
-除非你做了一些糟糕的事情，比如进行 JS 重定向等，否则所有用户都会被引导到这个页面。 - 对于以前访问过该站点的用户来说并不是那么好，因为除非您添加确切的 JS 重定向，否则他们必须单击才能访问该站点。 - 对 SEO 不利（嘘）
选项二包括使您的启动页面实际上是主页的一部分。这是一个快速而简单的部署示例，但我已经在大型项目中实现了它，并且效果非常好。基本上，制作一个“splash” div 和一个“post-splash” div。为它们分配两个 ID（可能使用那些确切的字符串），以便您可以使用 JS 操作。后启动 div 应该（哦，天哪，他会这么说）包含 display:none 的 内联样式。这是有目的的，所以不要有过敏反应 - 这样即使用户正在等待 CSS 加载，它仍然不可见。
基本上，当用户单击“splash”部分中的“continue”按钮时，您可以使用 JS 将“splash” div 的可见性完全切换为 none，并将“postsplash” div 的可见性切换为阻止，或者您这样做淡化效果。淡入淡出效果需要绝对定位在“splash”div 上，以便在淡入淡出期间其他内容可以出现在窗口顶部。
这种方法的好处是多方面的，但如果适用的话，您必须使用 JS 来解决一些缺点。我会首先为非 JS 机器构建它（这就像美国用户的
这是很多信息，所以如果您需要任何说明，请告诉我，但是这种方法在企业级项目中非常适合我，而且它非常兼容，因为它不会破坏您的网站，因为它不会破坏您的网站支持 JS（意味着他们是老用户禁用它，网络禁用它，等等）。支持渐进式增强！
为了真正善待您的用户，您还应该设置一个 cookie，如果他们已经访问过该网站，该 cookie 将直接进入页面内容。根据我的经验，用户真的不想多次看到启动页面。
【讨论】：
【参考方案3】：我正在使用 flexbox 和会话存储来隐藏和显示启动画面。
最好的部分是纯 CSS 和 Javascript。您可以使用 Jquery 来制作动画。我在会话存储中设置了一个变量SplashShown 以避免在页面重新加载时显示启动画面，但是如果用户在新的浏览器窗口中打开它，则会出现启动画面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title>Track My Bus|Splash</title>
<meta name="author" content="Hitesh Sahu" />
<style>
/*
Force full width & height.
If this block is removed, the layout height/length will be determined by
the amount of content in the page. That might result in a page which has
a footer only a few inches from the top of the viewport, or one which
scrolls beyond the viewport.
This forces the layout to always be full screen regardless of how much,
or how little, content is in place. Neither is "right" or "wrong", there
are valid cases for each. I just want to be clear what's controlling the
page/viewport height.
*/
html, body, .viewport
width: 100%;
height: 100%;
margin: 0;
.flex-container
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
#flex-item
text-align: center;
margin: auto;
</style>
</head>
<body >
<!--Your Main contents-->
<div id ="main" class="flex-container"
style ="background: #673AB7;">
<h2 style ="color: white;">Your Awesome contents<h2>
</object>
</div>
<!--Your Splash Screen-->
<div id="splash" class="flex-container"
style ="background: #E91E63 ; display: none" >
<!--Center align Splash contents in all screen sizes-->
<div id="flex-item" >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGvaIWed26uYYryjCfO2qWpAFGrDyoWUlvCuPx-sEMAguMHcKQvw"
style="width:150px ; height :150px"
/>
<h2 style ="color: white;">My Awesome App<h2>
</div>
</div>
<!-- Scripts-->
<script type="text/javascript">
function fade(element)
var op = 1; // initial opacity
var timer = setInterval(function ()
if (op <= 0.1)
clearInterval(timer);
element.style.display = 'none';
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
, 50);
setTimeout(function()
if(typeof(Storage) !== "undefined")
console.log("Already shown" +sessionStorage.getItem('spalashShown'));
if( !sessionStorage.getItem('spalashShown') || sessionStorage.getItem('spalashShown') === null )
document.getElementById('splash') .style.display = 'inline';
//Display splash
setTimeout(function()
fade(document.getElementById('splash'));
// document.getElementById('splash') .style.display = 'none'
// window.location = "http://hiteshsahu.com";
sessionStorage.setItem('spalashShown', true );
, 3000);
else
//Display Main Content
document.getElementById('splash') .style.display = 'none'
console.log("Already shown");
else
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
, 0);
</script>
</body>
</html>
【讨论】：
以上是关于网站加载前的欢迎画面（点击进入）[启动画面]的主要内容，如果未能解决你的问题，请参考以下文章