Показать DIV по движению мыши к закрывающей вкладке браузера Кросс-платформа

Question

Мой клиент хочет, чтобы привлекательный DIV отображался, когда кто-то пытается переместить указатель мыши, чтобы закрыть вкладку браузера, и работает кросс-платформенным в последних браузерах.

Что такое метод jQuery для обнаружения этого конкретного движения мыши?

Answer 1

Вам необходимо что-то определить операционной системы пользователей. Это можно сделать с помощью обнаружения агента пользователя. См. Этот вопрос: How to check website viewer's operating system?

Тогда один из вариантов заключается в том, чтобы поместить фиксированную позицию в скрытый div в этом углу и наведите указатель мыши на ваш div.

код псевдопользователей может выглядеть

HTML:

<div id="trigger-div" class="trigger-div"></div> 
<div id="annoying-div" class="hidden">PLEASE DON'T LEAVE ME!</div> 

CSS:

.hidden {display: none} // may or may not be appropriate. Could use visibility or opacity 

.trigger-div {position: fixed; height: 100px; width: 100px; top: 0;} 
.trigger-div.windows {right: 0;} 
.trigger-div.mac {left: 0;} 

псевдопользователей JS:

jQuery(function() { 
    var OS = navigator.platform; 

    if (OS === 'MacIntel') { 
     jQuery('#trigger-div').addClass('mac'); 
    } else if (OS === 'Win32') { 
     jQuery('#trigger-div').addClass('windows'); 
    } else { 
     // Maybe consider mobile? 
     jQuery('#trigger-div').hide(); 
    } 
} 

jQuery('#trigger-div').on('hover', function() { 
    ('#annoying-div').removeClass('hidden'); 
});