0

「ゼロサイズの div の 4 つの境界線で遊ぶ」トリックを使用して、三角形の「スピーチのヒント」を使用して、純粋な CSS 吹き出しを作成しました。ここまでは順調ですね。

しかし、三角形の位置を動的に調整する必要もあります (単語を含むメインの長方形の div に関連して)。

絵の例:

http://www.designwalker.com/img/speech_bubble/speech_bubble10.jpg (色の違いを無視すると、1つ目と2つ目のバブルの三角形の位置が異なります)。

問題は、三角形 (およびその境界線) が一般的にメイン バブルの :before および :after クラスを使用して作成されることです。そして、jQuery (または任意の JavaScript API) には、:before および :after クラスの CSS 属性を操作する (簡単な) 方法がないようです。

解決策はありますか？

Facebookは、ユーザーが右側のティッカーラインにカーソルを合わせたときに、（画面の折りたたみやその他の要因に応じて）必要な場所に三角形を動的に配置することに問題がないように思われるため、それが可能であると確信しています.

私はここで検索し、クラスをdivに動的に追加する解決策を見つけましたが、それぞれが異なるオフセット値を持つ多くの一意のクラスが存在するため、実用的ではないようです。(0 ピクセルから多数のピクセルまで)

ありがとう！

アンドリュー

PS:

ところで、Facebook をさらに調べたところ、背景画像のスプライト トリックを実行している可能性があります。しかし、私は「ゼロサイズの div の 4 つの境界線で遊ぶ」トリックを使用してバブルを「完成させる」のに多くの時間を費やしました。すぐにウェブサイト..... :-(

4

1 に答える 1

3

疑似要素は、適切な DOM に公開されていないため、Javascript で操作することはできません (この用語が Javascript で暗黙の DOM 要素を操作する方法を参照するようになるまで、これを Shadow DOM と呼んでいました)。

できることは、他のルールを通じてその位置に影響を与えるクラスを含む要素に追加することです。StubornellaのOOCSSライブラリには、非常によく似た例があります ( IE6 サポートを実現するためにand<b>ではなく要素を使用しますが、要素は操作されず、親からスタイルを推測するため、原則は同じです)。このコードは、子の装飾要素をどのように配置するかを指示する親要素のクラスを示しているという点で非常に有益です。:before:after<b>

更新：骨の折れる説明

ヒントがそれ自体で OK を表示する方法を想定して、個別の CSS ルールを記述して、ヒントのそれぞれの異なる位置を定義します。ここでは、要素が先端を作成しており、既に完全に下部にleft配置されているという前提で position を使用しました。:afterこれらの代わりに、必要なセレクターやポジショニング トリックを使用できます。

.bubble_left:after {
    left: 0;
}

.bubble_mid-left:after {
    left: 25%;
}

.bubble_mid-right:after {
    left: 75%;
}

.bubble_right:after {
    left: 100%;
}

次に、位置を変更するために必要なことは、'bubble' 要素のクラスを変更することだけです。これにより、:after要素の CSS プロパティに影響を与えようとする問題を回避できます。

于 2013-02-21T17:49:37.963 に答える