Блог

[редактировать] Поэтому я использовал одну из подсказок javascript, предложенных ниже. У меня есть подсказки, которые нужно показывать, когда ты останавливаешься, и прятаться, если ты двигаешься. Единственная проблема в том, что это работает, когда я это делаю:

 document.onmousemove = (function() {
    var onmousestop = function() {
        Tip('Click to search here');
        document.getElementById('MyDiv').onmousemove = function() {
        UnTip();
    };
    }, thread;

    return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();
 

Но я хочу, чтобы функция применялась только к определенному div, и если я изменю первую строку на «document.getElementById(‘myDiv’).onmousemove = (функция() {» Я получаю ошибку javascript document.getElementById(‘myDiv’) равен нулю, что я упускаю….??

[/править]

Я хочу отображать сообщение в стиле воздушного шара, когда пользовательская мышь останавливается на элементе более чем на 1,5 секунды. А затем, если они переместят мышь, я хотел бы спрятать воздушный шар. Я пытаюсь использовать некоторый код JavaScript, который я нашел в дикой природе. Вот код, который я использую, чтобы определить, когда мышь остановилась:

 document.onmousemove = (function() {
    var onmousestop = function() {
        //code to show the ballon
        };
    }, thread;

    return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();
 

Поэтому у меня есть два вопроса. Во-первых, есть ли у кого-нибудь рекомендуемый легкий воздушный шар javascript, который будет отображаться в месте расположения курсора. И во-вторых, код обнаружения остановленной мыши работает нормально, но я не знаю, как определить, что мышь снова начала двигаться, и скрыть воздушный шар. Спасибо…

Немного поздно отвечать на этот вопрос, но это будет полезно для тех, кто в этом нуждается.

Мне нужна была эта функция, чтобы иметь возможность определять, когда мышь перестала двигаться в течение определенного времени, чтобы скрыть контроллер проигрывателя HTML/JS при наведении курсора мыши на видео. Это пересмотренный код для всплывающей подсказки:

 document.getElementById('MyDiv').onmousemove = (function() {
    var onmousestop = function() {
        Tip('Click to search here');
    }, thread;

    return function() {
        UnTip();
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();
 

В моем случае я использовал немного jQuery для выбора элементов для моего контроллера плеера:

 $('div.video')[0].onmousemove = (function() {
    var onmousestop = function() {
        $('div.controls').fadeOut('fast');
    }, thread;

    return function() {
        $('div.controls').fadeIn('fast');
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();
 

Плагин jQuery hoverIntent обеспечивает аналогичное поведение. Он определяет, хотел ли пользователь «навести» курсор на определенный элемент, проверяя, замедляют ли они перемещение мыши по элементам и тратят ли определенное количество времени на наведение курсора на элемент.

Он запускает событие «выход» только тогда, когда пользователь покидает элемент, что звучит не совсем так, как вы ищете, но код довольно прост.

Также следите за привязкой вещей к mousemove когда вам не нужно собирать события, mousemove быстро запускает множество событий и может серьезно повлиять на производительность вашего сайта. hoverIntent привязывает mousemove только тогда, когда курсор вводит активный элемент, и впоследствии его разматывает.

Если вы все же попробуете hoverIntent, у меня возникли некоторые проблемы с уменьшенной версией, не запускающей события «вне», поэтому я бы рекомендовал использовать полный, неподтвержденный источник.

Вот отличный плагин jQuery для приятной всплывающей подсказки.

http://jqueryfordesigners.com/demo/coda-bubble.html

[править] Я думаю, не видя HTML-кода компаньона, трудно сказать, что не так. Я бы дважды проверил, что у элемента есть соответствующий идентификатор, указанный в теге. Кроме того, если это не академическое упражнение, я бы предложил использовать что-то вроде плагина jQuery, на который я ссылался выше. Безусловно, существует множество других готовых инструментов, подобных этому, которые уже будут иметь дело со всеми мелочами, к которым вы сейчас обращаетесь.

 document.onmousemove = (function() {
  if($('balloon').visible) {
  //mouse is moving again
}....//your code follows
 

Использование Prototype.js синтаксис вы можете определить, что мышь переместилась, как только воздушный шар станет видимым.