如何在我的网站上创建欢迎屏幕？例如，当用户点击进入网站时，我有一个图像和一个显示“ENTER”的链接。我该怎么办？ 如果可能的话，使用Javascript或JQuery，当用户点击“ENTER”时，是否可以从启动画面交叉淡入到网站？
我目前还没有任何代码。
答案 0 :(得分：11)
您可以在第一次访问时将您的启动画面放在网站顶部的div中，当用户点击它时（或在＆＃34;输入＆＃34;链接上），将其淡化为：
<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来决定是否需要显示这部分代码。
答案 1 :(得分：7)
我将建议两种方法来做到这一点，但我强烈建议您在JS关闭时设计它。
选项一包括实际制作启动页面（单独的文件） - 换句话说，您的index.html或您的主要登陆文件只包含该标记的任何内容，并且不需要javascript。这有缺点：
- 所有用户都可以访问此页面，除非你做了一些像JS重定向那样糟糕的事情，等等。 对于以前访问过该网站的用户来说，这并不是那么好，因为他们必须点击才能访问该网站，除非你添加那个确切的JS重定向。 -Bad for SEO（boooo）
选项二包括使您的启动页面实际上成为主页面的一部分。这是一个快速而肮脏的部署示例，但是我已经在大型项目上实现了它并且它运行得非常好。基本上，制作一个“泼溅”div和一个“后溅”div。为它们分配两个ID（可能使用那些确切的字符串），这样你就可以使用JS来操作它们。后飞溅div应该（哦上帝，他会说它）包含display：none的内联样式。这是目的，所以不要有过敏反应 - 即使用户等待CSS加载它仍然是不可见的。
基本上，当用户单击“splash”部分中的“continue”按钮时，您可以使用JS直接将“splash”div的可见性切换为none，将“postsplash”div切换为block，或者褪色效果。淡入淡出效果需要在“splash”div上进行绝对定位，以便在淡入淡出期间其他内容可以出现在窗口的顶部。
这种方法的好处是多种多样的，但是如果适用的话，你必须使用JS来解决这些问题。我会首先为非JS机器构建它（这类似于美国用户的1％） - 换句话说，“继续”按钮将是一个链接，用于刷新页面，该参数将加载页面“后喷溅”可见，“泼溅”显示：无。只有在运行动态服务器环境时才有可能。如果您没有运行PHP或ASP或其他东西，那么您可以让它像选项1一样。如果用户有javascript，那么只需调用preventDefault（）方法就可以调用preventDefault（）方法，以便页面不会刷新，而是执行淡入淡出以显示内容。
这是很多信息，所以如果你需要任何澄清让我知道，但这种方法对我来说对企业级项目很有用而且它的超级兼容性因为它不会破坏你的网站支持JS（意味着它们已经过时，用户已将其禁用，网络已禁用，等等）。是为了逐步加强！
为了让您的用户真正感到高兴，您还应该设置一个cookie，如果他们已经访问过该网站，将直接访问该页面内容。根据我的经验，用户并不是真的想要多次看到启动页面。
答案 2 :(得分：1)
我正在使用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"
alt="app_icon"
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>
答案 3 :(得分：0)
<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"
alt="app_icon"
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>