Question

我希望将全部显示图片（我们的徽标）的功能结合在Shopify正面网站全屏上，让它自动消失或在几秒钟后消失，这样人们就可以在图片或我们的徽标消失后访问网站（2）秒）。

现在我有HTML的这两部分，但它们不能以某种方式一起工作。

有人可以帮忙吗？

谢谢

＆＃13;

<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>

＆＃13;

Answer 1

尝试以下代码：

<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秒进行测试。我可能会把它设置为一分钟，也许更多一点。如果移动鼠标，完成鼠标点击或按下键盘上的键，“屏幕保护程序”应该会消失。

加载Javascript全屏图像，2秒后消失（屏幕保护程序在空闲时间后）

1 个答案: