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>

工作plunkr样品 http://plnkr.co/edit/B8vKjIIFYp2oxiX6o8uI?p=preview

有没有办法让css3类跟随鼠标光标

2 个答案: