Question

我希望能够设计/实现最初遍历主页（index.html）的初始屏幕。当访问者点击输入页面时，您可以说Splash Screen消失了。我想知道如何在不创建其他页面的情况下执行此操作，而无需重定向。

我还希望能够为用户提供“不再显示此内容”的选项...

例如，http://www.runescape.com/

非常感谢，亚伦布鲁尔

Answer 1

默认情况下，当用户访问某个网页时，会弹出一个使用Simplemodal jQuery plugin

的屏幕

加载sets a cookie时，以便以后的任何网页浏览都可以检查该Cookie。如果在那里，请不要再显示弹出窗口。

Answer 2

我建议让一个容器同时容纳启动画面（可能是一个div与网站的大小，假设它有一个明确的宽度和高度），以及主页。

主页应隐藏（visibility: hidden），因为有些搜索引擎并不真正“喜欢”display: none。

然后，使用cookie方案，以便当用户访问主页时，不必再次查看启动画面。

我过去所做的是通过PHP，读取是否有cookie，如果有（意味着已经看到了），则更改启动画面的类（隐藏它）和更改主页的类别（显示它）。

当然这可以通过javascript完成。

Answer 3

警告：未来的哲学而不是实际的答案： - ）

实现启动画面的最令人满意的方法是等待几年，直到HTML民众理解并实现<splash-image>标记，该标记可以放入任何页面的<head>部分一点都不它将是纯静态的（没有来自它的链接），完全可选，通过点击或时间限制到期而被解雇，将支持淡入淡出/滑动/破碎和类似的终止效果，不会花费相当大的努力让它看起来不看像一个弹出窗口，不会有一个单独的URL，也不会乱用搜索引擎机器人。到目前为止，这是最好的解决方案。但它根本不是任何人都可以选择的......但是。

尽管Quentin的评论高于其他几个人的认可，但我相信闪屏有很多有用的背景。一些启动画面不仅仅是“非常漂亮” - 它们可以是合法的内容。我找到了这个问题，同时（有点无果力）寻找一种方法来实现每日启动画面，可以对其进行更改以提供其他网站内容的背景和重点。

当你考虑到大量网站提供数十个低价值链接以争取观众的注意力时，其中90％永远不会被追随（甚至这个令人敬畏的网站都有罪），不难想象某些图片可能至少有一千个这样的词。有时甚至会为这样的图片增加相当大的价值，这是每次访问网站时首先显示的内容。

当然，如果您只是想要一个静态的启动画面来强制一些营销信息进入观众的意识，那么请不要 - 昆汀就在那里： - ）

Answer 4

这是带有启动屏幕和“不再显示”复选框的示例网页。选中该选项后，将创建一个cookie来绕过访问者的初始屏幕。

<html>
<script language="JavaScript"  type="text/javascript">

function splashTimeout(mymsg,mymsecs)
{
 var myelement = document.createElement("div");
myelement.setAttribute("style","background-color: grey;color:black; width: 450px;height: 220px;position: absolute;top:0;bottom:0;left:0;right:0;margin:auto;border: 4px solid black;font-family:arial;font-size:25px;font-weight:bold; align-items: center; justify-content: center; text-align: center;");
 myelement.innerHTML = mymsg;
 setTimeout(function(){
   if (id('bypass').checked){
    //set cookie
    setCookie("splashbox","splashbox")
   }else{
    //clear cookie
    setCookie("splashbox","")
   }
   myelement.parentNode.removeChild(myelement);
 },mymsecs);
 document.body.appendChild(myelement);
}

function getCookie(c_name)
{
var i,x,y,cookies=document.cookie;
  x=cookies.substr(0,cookies.indexOf("="));
  y=cookies.substr(cookies.indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
}

function setCookie(c_name,value)
{
var expiry=new Date();
expiry.setDate(expiry.getDate() + 100);
document.cookie=c_name + "=" + escape(value);
}

function check()
{
var username=getCookie("splashbox");
if (username!=null && username!="")
  {
  return
  }
else
  {
    splashTimeout("Splash 1.0<br><br><br>Welcome to my page...<br><br><br><input type='checkbox' id='bypass'><label for='bypass'>Do not show again</label><br>",5000)
  }
}

function id(myID){return document.getElementById(myID)}
</script>
<html>
<body onload=check()>
This is a sample website that shows a splashscreen when first visited. <br>
If the visitor checks the 'Do not show again' checkbox, 
a cookie is created to bypass the splashscreen.<br>
To demonstrate, click the checkbox when the splash appears.<br>
When you refresh the page, the splash will not appear again.<br><br>
To clear the cookie and reset the splashscreen, click ResetSplash.<br>
<input type=button value=ResetSplash onclick="splashTimeout('Splash 1.0<br><br><br>The splash is reset.<br><input type=checkbox id=bypass hidden><br>',1000)"
</body>
</html>

如何创建简单的启动画面/页面？

4 个答案: