Как показать всплывающую подсказку Ballon, когда мышь останавливается - PullRequest
Новая
       10

Как показать всплывающую подсказку Ballon, когда мышь останавливается

1 голос
/ 06 октября 2008

[править] Поэтому я использовал одну из подсказок 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 = (function () {", я получаю ошибку 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, которая будет отображаться в месте расположения курсора. И во-вторых, код «Обнаружить остановленную мышь» работает нормально, но я не знаю, как обнаружить, что мышь снова начала двигаться, и спрятать воздушный шар. Спасибо ...

Ответы [ 4 ]

6 голосов
/ 04 марта 2010

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

Мне нужна была эта функция, чтобы можно было определить, когда мышь перестала двигаться на определенное время, чтобы скрыть контроллер проигрывателя 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);
    };
})();
3 голосов
/ 07 октября 2008

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

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

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

Если вы попробуете hoverIntent, у меня возникли проблемы с минимизированной версией, которая не запускает события "out", поэтому я бы порекомендовал использовать полный, неинициализированный источник.

2 голосов
/ 06 октября 2008

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

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

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

1 голос
/ 06 октября 2008 
document.onmousemove = (function() {
  if($('balloon').visible) {
  //mouse is moving again
}....//your code follows

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

...