Question

战争迷雾的最佳方式是什么？＆＃34;键入图像被涂黑的东西，但随后当用户将鼠标悬停在图像上时，会显示光标周围的区域。因此，可能在图像上使用CSS设置了一些图层，当用户将鼠标悬停在图像上时，它变得透明，因此可以在鼠标周围的区域中看到图像，但图像的其余部分仍然显示为黑色。

Answer 1

如果您只想使用javascript和css执行此操作：

在中间创建一个带透明孔的黑色图像
使用一些javascript来获取鼠标位置
更新css以将雾图像的位置设置为鼠标指针

您必须确保所有内容都正确分层，以便您的图像位于雾图像下，如果不占用整个浏览器窗口，则雾图像位于其余内容之下。

Answer 2

我发现这是一个非常好的问题，所以对于未来的访问者，我会留下这个作为参考：

$(window).on('load', function () {
  var
    ctx = $('#canvas')[0].getContext('2d'),
    mouse = {x: -100, y: -100};

  // fill black
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  // track mouse
  $('#canvas').on('mousemove.fog', function (evt) {
    mouse.x = evt.offsetX;
    mouse.y = evt.offsetY;
  });

  (function animloop(now) {
    var
      frame = webkitRequestAnimationFrame(animloop), // use a polyfill here
      x = mouse.x,
      y = mouse.y,
      r = 10,
      grad = ctx.createRadialGradient(x, y, 0, x, y, r);

    grad.addColorStop(0, "rgba(0, 0, 0, 255)");
    grad.addColorStop(1, "rgba(0, 0, 0, 0)");

    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = grad;
    ctx.arc(x, y, r, 0, 2 * Math.PI, true);
    ctx.fill();
  }(Date.now()));
});

演示：http://jsfiddle.net/RUc5s/1/

Answer 3

在画布上，您可以在图像上创建一个部分透明的图层，但光标附近的区域将完全透明。图层并不真正存在于画布上，但有一些框架允许您进行图层处理。

在HTML / CSS上，你可以做图像的“图块”，它有2层，下面是图像，上面是部分透明的PNG。在悬停时，磁贴的PNG设置为display:none以显示下方的图像。

在鼠标悬停时显示图像的某些部分

3 个答案: