Question

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

有没有人知道一个JavaScript或者最好是jQuery库能够做到这一点吗？

如果你用不同的语言知道这样的事情，那么我可以自己写一些东西。

感谢。

Answer 1

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

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

Answer 2

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

如果您只需要在圆圈内选择它，那么您需要检查鼠标坐标是否有单击操作，以查看它是否在圆圈内，在其中包含矩形。请参阅：How to make the hovering trigger an animation only on a circle area in a div with radius border with jquery

@ 6bytes建议使用圆角。

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

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

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