有没有一种方法让css3类跟随鼠标光标
问题描述:
我对CSS3和JavaScript非常陌生,我正在挖掘这个主题的几天。 我想用图像掩盖照片。我想要面罩遵循鼠标指针。 我读过的是,使用类属性掩码或掩码图像完成掩码,然后是图像的url。 当鼠标移动时,是否有重新定位此掩码的方法?有没有一种方法让css3类跟随鼠标光标
答
当然,只是使用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
答
设定的初始样式:(在此情况下,使用限幅)
#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
'我读过的是使用类属性掩码或掩码图像完成掩码,然后是图像的URL.' ...这不是任何标准的一部分,但可能是一种方法来做到这一点.. – rnevius