我希望将全部显示图片（我们的徽标）的功能结合在Shopify正面网站全屏上，让它自动消失或在几秒钟后消失，这样人们就可以在图片或我们的徽标消失后访问网站（2）秒）。
现在我有HTML的这两部分，但它们不能以某种方式一起工作。
有人可以帮忙吗？
谢谢
<div id="makethisvanish"><img src="image"></div>
<div class="fixed-background">
<img src="image" class="myimg">
</div>
<script type="text/javascript">
window.onload = function () {
window.setTimeout( vanishText, 2000 ); // 2000 is 2 seconds
}
function vanishText() {
document.getElementById( 'makethisvanish' ).style.visibility = 'hidden';
}
</script>
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.myimg {
height: inherit;
}
</style>
答案 0 :(得分：2)
尝试以下代码：
<head>
<script>
window.onload = function () {
window.setTimeout(vanishText,2000); // 2000 is 2 seconds
}
function vanishText() {
document.getElementById('makethisvanish').style.opacity = '0';
}
</script>
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#makethisvanish {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
height: auto;
opacity: 1;
z-index:1000;
margin: 0 auto;
transition: opacity .5s linear;
}
#makethisvanish img {
width: 100%;
height: auto;
}
.fixed-background {
position: relative;
top: 0;
left: 0;
height: 100%;
overflow: hidden;
}
.grid__item {
height: 50px;
}
.myimg {
height: 100%;
width: auto;
}
</style>
</head>
<body>
<div id="makethisvanish">
<img src="http://i65.tinypic.com/5nn1va.jpg">
</div>
<div class="grid__item">
<div class="fixed-background">
<img src="http://i65.tinypic.com/5nn1va.jpg" class="myimg">
</div>
</div>
</body>
我相信这应该吗？
如果您遇到问题，请回报。我会尽力帮你解决它;）
修改
对于全屏图片，您甚至需要更少：
<head>
<script>
window.onload = function () {
window.setTimeout(vanishText,2000); // 2000 is 2 seconds
}
function vanishText() {
document.getElementById('makethisvanish').style.opacity = '0';
}
</script>
<style>
#makethisvanish {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
height: auto;
opacity: 1;
z-index:1000;
margin: 0 auto;
transition: opacity .5s linear;
}
#makethisvanish img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="makethisvanish">
<img src="http://i65.tinypic.com/5nn1va.jpg">
</div>
</body>
也许你需要在vanishText（）中使用另一行：
document.getElementById('makethisvanish').style.zIndex = "0";
但首先尝试使用上面的代码。
<强> EDIT_2
使用以下内容替换头部中的脚本：
window.onload = function () {
window.setTimeout(vanishText,2000); // 2000 is 2 seconds
}
var IDLE_TIMEOUT = 60; //seconds
var _idleSecondsCounter = 0;
window.setInterval(CheckIdleTime, 1000);
function CheckIdleTime() {
_idleSecondsCounter++;
if (_idleSecondsCounter >= IDLE_TIMEOUT) {
screensaver();
}
}
function vanishText() {
document.getElementById('makethisvanish').style.opacity = '0';
document.getElementById('makethisvanish').style.zIndex = '-1';
}
function screensaver() {
document.getElementById('makethisvanish').style.zIndex = "1000";
document.getElementById('makethisvanish').style.opacity = "1";
}
function resetTimer() {
if(_idleSecondsCounter >= IDLE_TIMEOUT) {
vanishText();
}
_idleSecondsCounter = 0;
}
document.onclick = function() {
resetTimer();
};
document.onmousemove = function() {
resetTimer();
};
document.onkeypress = function() {
resetTimer();
};
您可能需要调整IDLE_TIMEOUT。它被设置为5秒进行测试。我可能会把它设置为一分钟，也许更多一点。如果移动鼠标，完成鼠标点击或按下键盘上的键，“屏幕保护程序”应该会消失。