Question

我正在尝试创建一个覆盖网站x秒的div，然后当访问者在页面上处于活动状态时消失。我最接近的是：

<div id="campaign">
</div>

<style>
/* campaign */

#campaign{
    display:block;
    background:url() center center no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: cover;
    background-color: #ff0000;
    overflow: visible;
    width: 100% !important;
    height: 100% !important;
    position: fixed;
    z-index: 2 !important;
}

#campaign:hover{
    cursor: pointer !important;
}
</style>

<script>
$( "#campaign" ).click(function() {
  $( "#campaign" ).fadeOut( "fast", function() {
    // Animation complete.
  });
});
</script>

它现在覆盖了页面，点击后淡出。

我需要它在页面上进行交互时淡出并在不进行交互时淡入淡出，这意味着如果用户进入浏览器中的另一个选项卡，#campaign将在返回页面时再次显示，但随后消失当他们与网站互动时再次。

有什么建议吗？谢谢！

Answer 1

你需要实现空闲计时器，它是https://github.com/thorst/jquery-idletimer的完整库，但你可以根据它创建自己的逻辑。

Answer 2

找到解决方案：

<script>
var timer;
$(document).mousemove(function() {
    if (timer) {
        clearTimeout(timer);
        timer = 0;
    }

    $('#campaign:visible').fadeOut();
    timer = setTimeout(function() {
        $('#campaign').fadeIn()
    }, 3000)
})
</script>

Div基于与站点的交互淡入/淡出

2 个答案: