javascript - 在鼠标悬停时显示图像的一部分

Question

在图像被涂黑的情况下进行“战争迷雾”类型的事情的最佳方法是什么，但是当用户将鼠标悬停在图像上时，会显示光标周围的区域。因此，可能在图像上使用 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显示下方的图像。