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

Question

[edit] Итак, я использовал одну из подсказок 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); 
    }; 
})(); 

Но я хочу функцию, чтобы применить только к определенному ДИВ и если изменить первую строку «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, который будет отображаться в месте расположения курсора. И два, детектор мыши остановил код работает нормально, но я в тупике о том, как обнаружить, что мышь снова начала двигаться и скрыть воздушный шар. Спасибо ...

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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

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

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