单击后如何使启动页面淡入淡出

时间:2016-03-25 10:19:04

标签: javascript html css

这是我的第一篇文章 - 无论如何 - 我引用了这个原始的问题Welcome screen before website loads (Click to enter) [Splash Screen]

按照第二个答案的说明,我创建了两个单独的div,我需要帮助弄清楚如何在用户点击启动时/之后使用javascript来更改splash div的可见性。

我对代码有一个非常基本的理解,而不是很多,但我很擅长挑选概念。这是我到目前为止所得到的:

>>> getattr(np, 'max')(values, axis=0)
array([2, 3, 6])

2 个答案:

答案 0 :(得分:4)

使用秘密复选框的纯CSS(无javascript)替代方案:



html {
  width: 100%;
  height: 100%;  
  background: lavender;
  text-align: center;
  font-family: arial, sans-serif;
}

input { 
  display: none;
}

#target { 
  opacity: 0;
  background-color: rosybrown;
  background: url('http://i.imgur.com/P9L9jzT.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  position: fixed;
  height: 100%;
  width: 100%;  
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-transition: all 2s; /* Safari */
  transition: all 2s;
}

#click:checked ~ label > #target {
  opacity: 1;
  z-index: 200;
  cursor: pointer;  
  pointer-events: auto;
}

#replay {
  color: crimson;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 20px;
  cursor: pointer;
}

#warning {
  color: white;
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
}

<input type="checkbox" id="click" checked/>

<label for="click">
<div id=target><h1 id=warning>WELCOME</h1></div> 
<span id=replay><small>-replay-</small></span>
</label>

<p>page content</p>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您的代码很乱 - 您错过了标签,错过了一些内容等。我建议您了解更多关于HTML和CSS的信息,并使用适当的IDE语法高亮显示。无论如何,这里的代码将达到您的期望。这还远非完美。

import mrq.scheduler
from mongodb.mongo_client import MongoCLient 

db = MongoClient('localhost',27017)
collection = db.mrq.mrq_scheduled_jobs

task = mrq.scheduler.Schedule(collection)
task.refresh()  ## read mongodb database
task.check()  ## Queues out-of-date tasks