Javascript css3类是否有方法跟随鼠标光标

我对CSS3和JavaScript还很陌生，我在这门学科上钻研了几天。 我想用图像遮罩一张照片。我想让面具跟随鼠标指针。 我了解到屏蔽是通过类属性mask或mask image完成的，后面是图像的url。

---

当鼠标移动时，是否有方法重新定位此掩码？

当然，只需使用JavaScript收听

mousemove

事件：

大概是这样的：

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

完成后，

删除VentListener

，因为这是一个非常昂贵的活动

可在此处找到可用的事件属性： 设置初始样式：（在本例中使用剪裁）

然后设置一些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>

document.body.onmousemove=函数（e）{
document.getElementById（“pic”）.style.clip=“rect”（+（e.clientY-50）+“px”+（e.clientX+50）+“px”+（e.clientY+50）+“px”+（e.clientX-50）+“px”；
}

KR工作样品

---

我读到屏蔽是通过类属性mask或mask image完成的，后面是图像的url。

。。。这不是任何标准的一部分，但可能是一种方法。太好了，谢谢！我将尝试用一个面具而不是一个剪辑：很久以前我用flash创建了这个网站，我想用平板电脑兼容的技术再做一次。我需要用一个具有圆形渐变的形状，或者是带过滤器的svg，或者是一个图像来遮罩。现在来看看剪辑。剪辑路径和剪辑不起作用。为什么他们又杀了flash？

<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>