在生长从那个图象的中心的图象的圆的面具

点击某个按钮，我需要显示黑胶唱片的图像。 图像将出现在按钮旁边的某个位置，并且是透明的png，使其看起来更圆。 问题是它需要使用圆形遮罩显示，该圆形遮罩从图像中心的点动画，并展开以显示整个“记录”。 如何创建一个圆角动画蒙版，在不缩放/重新缩放图像的情况下显示“记录”图像。

有没有人知道一个JavaScript或最好的jQuery库能够像这样的东西？

如果你用不同的语言知道这样的事情，可能会帮助我写一些属于我自己的东西。

谢谢。

Answer 1

也许你可以创建一个大的白色（或背景色）PNG，中间有一个alpha透明孔。 将其放在要显示的图像的顶部，然后将其放大，同时将其固定在其中心点。 一旦缩放到整个底层图像在透明孔内的点，移除覆盖图像。

我不知道这会如何表现（可能很糟糕！），但这是一个想法。

Answer 2

HTML通常以矩形forms出现，如果你有一个透明的图像，那么你可以缩放它，保持它的中心不变。

如果您只需要在圆圈内选择它，那么您需要检查鼠标坐标是否有单击操作，以查看它是否在圆圈内，在其包含的矩形内。 请参阅： 如何使hover触发器仅在带有jquery的半径边界的div中的圆形区域上触发动画

---

@ 6bytes建议使用圆角。

Chrome和FireFox目前通过border-radius和-moz-border-radius CSS属性环绕圆角，因此您可以在视觉上以50%边框半径实现圆形。 但是，这只是底层矩形的视觉差异，矩形内的点击仍然计入圆圈本身。

 #circle { -moz-border-radius: 50%; border-radius: 50%; } 

基本矩形演示： http ： //jsfiddle.net/rL4BU/2/

您可以输入一些代码来检查点击是否在圈内以解决此问题。

Circle Clicks Demo： http ： //jsfiddle.net/rL4BU/4/