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("images/background.png");
    font: 12px "Lucida Sans Unicode", "Arial", sans-serif;
    Z インデックス: 3;
}    

＃コンテンツ {
    幅: 686px;
    高さ: 598px;
    位置: 絶対;
    左: 50%;
    上: 50%;
    マージントップ: -282px;
    マージン左: -343.5px;
    /*背景画像: url("images/hacky_hole2.png");*/
    Z インデックス: 1;
}

    。滑り台 {
        幅: 100%;
        高さ: 100%;
        背景画像: url("images/content.png");
        位置: 相対;
        Z インデックス: 2;
    }

更新:今サイトを確認すると、「window」メソッドを使用しようとして失敗したことがわかり、z-index が機能しなかった理由がわかります。

4

3 に答える 3

4

div を六角形にすることはできませんが、アルファ透明度を持つ PNG ファイルを使用して、必要な領域をマスクすることができます。したがって、4 つの 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

もし開発するのが私だったら、あなたのその 2 つのレイヤー リンクをツリー レイヤーにします...

元：

1.既存の背景を持つレイヤー

2.灰色の六角形のレイヤー

3.周囲の言葉と周囲の背景を重ねる

そのように、左右の矢印をクリックすると、灰色の六角形が 1. と 3. のレイヤーの真ん中でスライドし、あなたが言及した醜さを防ぎます:)

それが役に立てば幸い！

于 2010-06-02T22:12:18.287 に答える
1

Eric Meyer の曲線的なコンセプトとデモは、あなたを正しい方向に導くかもしれません。「CSS黎明期」の複雑なハックですが、強力なテクニックです。

于 2010-06-02T22:17:40.770 に答える