有沒有一種方法讓css3類跟隨鼠標光標

Question

我對CSS3和JavaScript非常陌生，我正在挖掘這個主題的幾天。 我想用圖像掩蓋照片。我想要面罩遵循鼠標指針。 我讀過的是，使用類屬性掩碼或掩碼圖像完成掩碼，然後是圖像的url。 當鼠標移動時，是否有重新定位此掩碼的方法？

Answer 1

當然，只是使用JavaScript來聽mousemove事件：

事情是這樣的：

document.getElementById('myVerySpecificContainer').addEventListener('mousemove', function(event) { 
    // reposition whatever with the event coordinates (clientX, clientY, screenX, screenY) 
} 

當你完成後，removeEventListener因爲它是一個非常昂貴的事件。

可用事件屬性可以在這裏找到： https://developer.mozilla.org/en-US/docs/Web/Events/mousemove

Answer 2

設定的初始樣式：（在此情況下，使用限幅）

#pic { 
    position: absolute; 
    clip: rect(0px, 100px, 100px, 0px); 
    } 

然後設置一些JS以更新鼠標移動的樣式

<img id='pic' src="http://www.html5rocks.com/en/tutorials/masking/adobe/clip1a.png" width="568"> 
    <script> 
     document.body.onmousemove= function(e){ 
     document.getElementById("pic").style.clip = "rect("+(e.clientY-50)+"px "+(e.clientX+50)+"px "+(e.clientY+50)+"px "+(e.clientX-50)+"px)"; 
     } 
    </script> 

working plunkr sample http://plnkr.co/edit/B8vKjIIFYp2oxiX6o8uI?p=preview