在鼠标向关闭浏览器选项卡跨平台移动时显示 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');
});

在鼠标向关闭浏览器选项卡跨平台移动时显示 DIV

Show DIV on Mouse Movement Towards Closing Browser Tab Cross-Platform

browser

jquery

cross-platform

exit

browser-tab