从该图像中心生长的图像上的圆形蒙版

点击某个按钮后，我需要显示黑胶唱片的图像。该图片将出现在按钮旁边的某处，并且是一个透明png，使其看起来很圆。问题在于它需要使用圆形蒙版来显示，该蒙版从图像中心的一个点开始动画并展开以显示整个“记录”。如何创建一个圆形的动画蒙版，可以在不缩放图像的情况下显示“记录”图像。从该图像中心生长的图像上的圆形蒙版

有谁知道一个JavaScript或最好是jQuery库能够这样的东西？

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

感谢。

来源

2010-12-15 6bytes

也许你可以创建一个大的白色（或背景色），PNG在中心的Alpha透明度孔。将其放置在要显示的图像顶部，然后将其放大并保持其中心点固定。一旦缩放到整个基础图像位于透明孔内的位置，请移除覆盖图像。

我不知道这将如何执行（可能很糟糕！），但这是一个想法。

来源

2010-12-15 16:31:15

嗯，这是一个想法，必须尝试一下。谢谢。 – 6bytes 2010-12-15 16:38:57

那么，它的工作？ – 2010-12-18 06:38:41

刚回到这个问题。@KenRedler - 它表现得非常糟糕，所以最终我们改变了整个效果的逻辑。 – 6bytes 2012-05-21 16:28:51

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%; 
}

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

你可以把一些代码来检查，如果点击是在圆内解决这个问题。

圈次数演示：http://jsfiddle.net/rL4BU/4/

来源

2010-12-15 15:12:35 Orbling

那么一个圆角足够大的矩形呢？ – 6bytes 2010-12-15 15:35:20

@ 6bytes：在HTML中获得圆角的唯一方法是使用'border-radius' CSS属性，IE9将支持这一点，但较低版本不支持。 Chrome和FireFox支持它（旧的FireFox支持'-moz-border-radius'，而后者都支持）。但它不能帮助点击事件，看到这个演示：http://jsfiddle.net/rL4BU/1/ – Orbling 2010-12-15 16:11:50

我想你误解了我。我点击某处（我不在乎什么和在哪里），并且显示圆形图像的动画应该出现在页面上。我编辑了这个问题，让我的问题更清楚。动画是一个问题，而不是按钮。 – 6bytes 2010-12-15 16:30:45

从该图像中心生长的图像上的圆形蒙版

回答

相关问题