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

Question

我的客户希望当有人试图向上移动鼠标以关闭浏览器选项卡时显示一个有吸引力的 DIV，并在最新的浏览器中跨平台工作。

用于检测特定类型鼠标移动的 jQuery 技术是什么？

Answer 1

您需要一些东西来确定用户的操作系统。这可以通过用户代理检测来完成。看到这个问题：如何检查网站查看器的操作系统？

然后，一种选择是在那个角落放置一个固定位置的隐藏 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');
});