Появление дива при отсутствии движений мыши

Рейтинг: 3Ответов: 2Опубликовано: 29.12.2014

Можно ли реализовать появление дива на сайте, если курсор мыши не двигается в течение определенного времени? Если да, то как это можно сделать?

javascript
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Примерно так: http://jsfiddle.net/q3hnLnpk/

HTML

<div id="body">
    Не спи на работе
    <div id="spoiler">ну я же просил!</div>
</div>

JavaScript

var x = 0,
    y = 0,
    divTimeout,
    spoiler = document.getElementById('spoiler'),
    showed = false;

spoiler.style.display = 'none';

document.getElementById('body').onmousemove = function(e) {
    x = e.clientX;
    y = e.clientY;    
}

setInterval(function() {
    if (x == 0 && y == 0) {
        console.log('mouse stopped');
        if (!showed) {
            divTimeout = setTimeout(function() {
                spoiler.style.display = 'block';
            }, 2000);
            showed = true;
        }
    } else {
        console.log('mouse moves');
        clearTimeout(divTimeout);
        spoiler.style.display = 'none';
        showed = false;
    }
    x = 0;
    y = 0;
}, 100);

Обновление

В FF dev работает, как изложено в вопросе, без каких-то морганий. Мышкой надо двигать по тексту "Не спи на работе", т.к. на нем висит обработчик событий. В реальном примере его следует повесить на <body>.

Скрипт работает следующим образом: на div #body вешается обработчик onmouseover, который сохраняет текущие координаты мыши. Параллельно работает setInterval, который обнуляет координаты мыши и проверяет, не равны ли они нулю (если мышью шевелить, то они не будут нулевыми). Если не равны, то пользователь двигает мышкой, если обнулены - нет, тогда и показываем сообщение

▲ 2

Нужно зарядить setTimeout(), который покажет div через опр. время.

По событию движения мыши, надо прятать этот div, и переопределять таймаут на новое время.

Работающий пример

var spoiler = document.getElementById('spoiler'),
    timeout,
    wait = 800; // ms, сколько можно не двигать мышь

function alive(){ // убрать напоминалку и выставить таймер
    clearTimeout(timeout);
    spoiler.style.display = 'none';
    timeout = setTimeout(remind, wait);
}

function remind(){
    spoiler.style.display = 'block';
}

// поехали!
spoiler.style.display = 'none';
document.addEventListener( 'mousemove', alive);
timeout = setTimeout(remind, wait);