0

我的标题中有 9 个链接，正文中有 10 个 div。第一个 div 是主页，其他 9 个 div 有不同的内容。我想要做的是当人们将鼠标悬停在 9 个链接上时，它会显示 9 个 div 中的 1 个。但是如果用户停止使用鼠标，它需要在 5 分钟后返回到第一个 div。

我希望有人可以帮助我进行设置。

4

3 回答 3

1

这样的事情怎么样？

// call showPage('something') to switch to a different section
var currPage = 'main';
function showPage(id) {
    if (currPage !== null) {
        document.getElementById(currPage).style.display = 'none';
    }
    currPage = id;
    document.getElementById(currPage).style.display = 'block';
}

var lastMove = new Date().getTime();
document.onmousemove = function() {
    lastMove = new Date().getTime();
}
setInterval(function() {
    var now = new Date().getTime();
    if (now - lastMove > 300000) {
        showPage('main');
    }
}, 5000);

我们保留一个全局lastMove变量，每次鼠标移动时都会使用当前时间戳进行更新。

然后我们有一个每 5 秒调用一次的函数，如果距离上次鼠标移动已经 5 分钟，它可以做一些事情。

于 2013-06-04T21:39:13.470 回答
0

您可以使用绝对位置制作所有 div，然后使用 style.visibility 将其从“隐藏”切换为“可见”。至于 5 分钟并返回 div 1 - 您可以设置计时器功能，并且 onMouseMove 只需重置计数器。

<header>
<script type='text/javascript'>
     var maxTime = 300;//sec=5min
     var offTime = 0;
     document.documentElement.onmousemove = function(){offTime=0};
     function isTimeToReturn(){
         offTime++;
         if(offTime<=maxTime){
             setTimeout('isTimeToReturn',1000);
         }else{
             //change your present div to hidden and first to visible
         }
     }
     setTomeout('isTimeToReturn',1000);

</script>
</header>
于 2013-06-04T21:44:50.640 回答
0

这是另一种解决方案，它涉及在每次鼠标移动时设置一个新计时器。

function goToMain() {
    // todo: switch back to Main
}
var timer = null;
document.onmousemove = function {
    if (timer !== null) clearTimeout(timer);
    timer = setTimeout(goToMain, 300000);
}

这比我的第一个解决方案的代码稍微干净一些，但是它在每次鼠标移动时都会进行更多的处理，因此它可能没有那么高效。

于 2013-06-04T21:41:19.700 回答