在mouseover上顯示圖像的部分

什麼是最好的方式去有一個「霧戰爭」類型的東西，圖像被遮住了，但隨着用戶鼠標懸停在圖像周圍光標區域顯示。因此，可能有一些圖層使用的是CSS樣式，因爲用戶鼠標懸停在圖像上變得透明，因此可以在鼠標周圍的區域中看到圖像，但圖像的其餘部分仍然是黑色的。在mouseover上顯示圖像的部分

來源

2012-05-08 BerenTW

如果你只是想使用JavaScript和CSS來做到這一點：

中間
使用創建一個透明的孔黑色圖像JavaScript來獲取鼠標位置
更新css將霧圖像的位置設置爲鼠標指針

您必須確保所有內容都正確分層，以便您的圖像位於霧圖像下方，而霧圖像如果這不佔用整個瀏覽器窗口，則e在其餘內容之下。

來源

2012-05-08 06:49:53

我認爲這將做的工作不夠好。感覺有點黑客，但它會起作用。謝謝:) – BerenTW

很好的答案，+1。 –

在畫布上，您可以在圖像上創建一個部分透明的圖層，但光標附近的區域將完全透明。圖層並不是真的存在於畫布上，但有框架可以讓你做圖層。

在HTML/CSS上，您可以對圖像進行2個圖層的「拼貼」，上面有一張圖片和一張半透明的PNG圖片。懸停時，圖塊的PNG設置爲display:none，以顯示下方的圖像。

來源

2012-05-08 06:48:30 Joseph

我發現這是一個非常好的問題，所以對於未來我的訪問者會離開這個作爲參考：

$(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/

來源

2012-05-08 07:50:06 Yoshi

這實際上非常酷，謝謝。儘管目的不是要慢慢地揭示，而是要揭示鼠標的一小部分，並且隨着鼠標移動到其他地方，鼠標將返回到黑色的區域。 – BerenTW

在mouseover上顯示圖像的部分

回答

相關問題