8

这是我目前正在开发的网站：http ://willcrichton.net/

如果你点击中间六边形两边的箭头，你可以看到它使用 jQuery + jQuery Cycle + jQuery Easing 左右过渡。但是，您也可以看到它相当难看——因为我使用的是六边形而不是正方形，并且因为 div 是正方形的，所以内容六边形以一种令人不快的方式与背景重叠。

所以，我的问题是：我如何将一个 div 破解成六边形？该六边形应该与内容 div 的大小/形状相同，并且当内容位于六边形区域之外时，它应该是不可见的。

编辑：

HTML

<div id="content"> 
<div class="slide">

    <a href="#"><div class="arrow left"></div></a>
    <a href="#"><div class="arrow right"></div></a>

    <div id="websites-title"></div>
    <div class="website">

    </div>
</div>
<div class="slide">
    <a href="#"><div class="arrow left"></div></a>
    <a href="#"><div class="arrow right"></div></a>

</div></div>


<script type="text/javascript">
    $("#content").cycle({
        fx: 'scrollHorz',
        timeout: 0,
        prev: ".left",
        next: ".right",
        easing: "easeInOutBack"
    });
</script>

CSS

/* 容器样式 */

＃容器 {
    宽度：908px；
    高度：787px；
    左：50%；
    最高：50%；
    位置：绝对；
    边距顶部：-393.5px；
    左边距：-452px；
    背景图像：url（“图像/背景.png”）；
    字体：12px "Lucida Sans Unicode", "Arial", sans-serif;
    z指数：3；
}    

＃内容 {
    宽度：686px；
    高度：598px；
    位置：绝对；
    左：50%；
    最高：50%；
    边距顶部：-282px；
    左边距：-343.5px；
    /*背景图片: url("images/hacky_hole2.png");*/
    z-index：1；
}

    。滑动 {
        宽度：100%；
        高度：100%；
        背景图像：url（“图像/内容.png”）；
        位置：相对；
        z指数：2；
    }

更新：如果您现在检查该站点，您会看到我尝试使用“窗口”方法失败，并且您可以看到 z-index 不起作用的原因。

4

3 回答 3

4

您不能将 div 制作成六边形，但您可以使用带有 alpha 透明度的 PNG 文件来遮盖您想要的区域。因此，您需要制作四个 div，每个 div 的背景都有一个 PNG 文件，其透明度充当蒙版。这些 div 将使用滑块绝对定位在您的 div 上方。

编辑：正如Pekka在下面指出的，这也可以用一个大的PNG文件作为掩码来完成。

编辑＃2：查看您发布的代码，我将对其进行修改：

<div id="content"></div>
<div class="slide">

    <a href="#"><div class="arrow left"></div></a>
    <a href="#"><div class="arrow right"></div></a>

    <div id="websites-title"></div>
    <div class="website">

    </div>
</div>
<div class="slide">
    <a href="#"><div class="arrow left"></div></a>
    <a href="#"><div class="arrow right"></div></a>
</div>

请注意，我关闭了<div id="content">元素。该元素应该是幻灯片的同级元素，但位于具有更高 z-index 的幻灯片上方。或者，如果您的“内容” div 用于其他目的而不仅仅是显示掩码，您可能需要创建一个专用于显示掩码的新元素。

于 2010-06-02T22:07:04.483 回答
1

如果是我开发，我会把你的那两层链接，变成树层......

前任：

1.现有背景的图层

2.灰色六边形图层

3.与周围的文字和周围的背景分层

像这样，当你点击左右箭头时，灰色的六边形会让我在 1. 和 3. 层的中间滑动，从而防止你提到的那种丑陋:)

希望能帮助到你！

于 2010-06-02T22:12:18.287 回答
1

Eric Meyer 的曲线概念和演示可能会为您指明正确的方向。这是“早期 CSS”的一个复杂的 hack，但它是一种强大的技术。

于 2010-06-02T22:17:40.770 回答