在鼠標懸停時顯示圖像的某些部分

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以顯示下面的圖像。