Question

以下是我的想法：

当用户浏览某个其他页面，或使用不同的应用程序，或者说直接没有主动与网页交互时，我想将其作为事件捕获并触发fadeIn（）函数。仅在这种特殊情况下，我想用阴影填充页面，一旦用户回来，它就会淡出。

问题是，如何捕获此事件并执行函数？

创建了一个演示here，但是当鼠标输出事件在窗口中触发时，我希望阴影淡入，但如果我这样做，当我回到体内时，窗口会开始脉动。

Answer 1

这真的很容易。只需在窗口中使用blur和focus个事件即可。您可以在回调中执行任何想要显示/隐藏页面阴影的操作。就个人而言，我建议使用BlockUI plugin。

$(function()
{
    var $body = $('body');
    $(window).focus(function () { $body.removeClass('fade'); })
             .blur(function () { $body.addClass('fade'); });
});?

工作示例： http://jsbin.com/idipo5/2（在Chrome中测试过）（预先警告，这真的很难看）

编辑：我很喜欢你想要的。请注意，如果窗口被鼠标悬停但没有焦点，它将不会取消屏蔽。如果您希望在这种情况下取消屏蔽，则可以删除focused标志及其检查。

在Chrome和FF中测试（IE是一段不值钱的悲惨篇幅）：

http://jsbin.com/ufido3

发布下面的JS代码，因为我不确定JSBin会保留多长时间。

$(function ()
{
  var $modal = $('#modal'),
      masked = false,
      focused = true;

  function mask()
  {
    if (!masked)
    {
      $modal.fadeIn('fast');
      masked = true;
    }
  }

  function unmask()
  {
    if (masked && focused)
    {
      $modal.fadeOut('fast');
      masked = false;
    }
  }

  $('html').hover(unmask, mask).focus(function (e)
  {
    e.stopPropagation();
    if ($(e.target).is('html')) unmask();
  }).blur(function (e)
  {
    e.stopPropagation();
    if ($(e.target).is('html')) mask();
  });

  $(window).focus(function ()
  {
    focused = true;
    unmask();
  }).blur(function ()
  {
    focused = false;
    mask();
  });
});

页面阴影效果：捕捉焦点效果事件

1 个答案: