Question

我们正在为博客制作一个艺术菜单。我们想要的一件事是在菜单中为每个项目制作包含照片和叠加颜色的图标，我们希望它们是圆圈。所以我在考虑这样的事情：

<div class="projectCirkel">
    <div class="image"></div>
    <div class="color"></div>
</div>

image-div包含背景图像，color-div包含背景颜色opacity: 0.7。然后最终projectCirkel-container-div我给了一个高border-radius和overflow: hidden来制作整个包装圈子。这似乎在Chrome中运行良好（尚未测试其他浏览器），但我添加了proximity effect jQuery plugin的圆圈大小，现在有时会显示溢出。我无法弄清楚为什么......

这可能是一个相当抽象的故事，所以这里有一个演示：http://test.raapwerk.nl/在这里，当你接近一个菜单项时，你可以看到圆圈变成了正方形。我希望你们能指出我正确的方向。

是的，这是我的接近代码：

$(".homeMenu .projectCirkel").bind("proximity", {max: 100}, function(e, pr) {
    var wh = 50,
    p = $(this).data("p");
    $(this).css({
        width: 13 + wh * pr,
        height: 13 + wh * pr,

        top:    ($info.homeMenu.projectPos[p].y == 1 ? -(wh / 2) * pr : "auto"),
        right:  ($info.homeMenu.projectPos[p].x == 1 ? -(wh / 2) * pr : "auto"),
        bottom: ($info.homeMenu.projectPos[p].y == 0 ? -(wh / 2) * pr : "auto"),
        left:   ($info.homeMenu.projectPos[p].x == 0 ? -(wh / 2) * pr : "auto"),

        "border-radius": 100,
        overflow: "hidden"
})

wh是目标宽度，$info.homeMenu.projectPos数组包含有关每个项目圈子必须定位的信息，p（左上角/右上角等）。。）

边界半径的圆圈

0 个答案: