0

画像とテキストをスライドさせるためにワードプレスプラグインを使用しています。このバナーには、スライドする画像が表示されるコンテンツ領域 (すべての場合と同様) があります。テキストと画像はバックエンドから追加できます。画像の上にテキストを表示できます。つまり、テキストが画像の上に表示されます。

私がやろうとしているのは、そのテキストをそのコンテンツ領域の外に強制して、その外に表示することです。

  <div class='uds-bb-slides'>
       <!--slide 1-->
       <div class='uds-bb-slide'><a href="" class='uds-bb-link'>image source 1</a> 
      <div class='uds-bb-description uds-undefined' style='top:185px;left:0px;width:270px;height:34px;'>
              <div class='uds-bb-description-inside'>this is slide one text</div>
            </div>
      </div>
      <!--slide 2-->
       <div class='uds-bb-slide'><a href="" class='uds-bb-link'>image source 2</a> 
      <div class='uds-bb-description uds-undefined' style='top:185px;left:0px;width:270px;height:34px;'>
              <div class='uds-bb-description-inside'>this is slide two text</div>
            </div>
      </div>
</div>

上記はプラグインの出力です。ページ読み込み時の JavaScript から、uds-bb-slidesがoverflow:hiddenになり、コンテンツ内に表示されるスライド イメージがコンテンツの外に表示されなくなります。

これが強制テキストが表示されない問題です。しかし、プラグイン js ファイルでは、overflow:visible にします。テキストは外側に表示されますが、バナー画像はコンテンツ ボックスにのみ表示されません。Theay は一番右から来て、左に行きます。つまり、アニメーションが適切に表示されていません

私の質問は、画像スライドが適切に表示されている間にテキストを外側に強制する方法です。

ページの読み込み時に uds-bb-slides のオーバーフローを非表示にするプラグイン Javascript スニペット

b(".uds-bb-slides",h).css({overflow:"hidden"});

ありがとう

4

1 に答える 1

1

生成されたマークアップをどの程度制御できるかはわかりませんが、可能であればdivwith クラスuds-bb-description uds-undefinedを何らかの方法で の兄弟にすることをお勧め.uds-bb-slidesしoverflow: hiddenます。そこから配置を試みることができます。

これを行うには、両方を でラッパーの下に置き、div両方position: relativeの子div要素を に設定position: absoluteして、コンテナーに対して相対的に配置できるようにします。

プラグインから出力マークアップを変更するのが難しすぎる場合は、JavaScript を使用してみてください。jQuery はこの作業を容易にしますが、絶対に必要というわけではありません。

基本的な考え方は、テキストを DOM 内で移動して、 の子ではなく、 の.uds-bb-slides影響を受けないようにすることoverflow: hiddenです。

編集：

ああ...あなたが.uds-bb-slidesand.uds-bb-slideクラスを持っていることに気づきました.2番目のものを最初のものと間違えました.

その場合、必要な結果を得るために「ハッキング」を行う必要がある場合があります。.uds-bb-slideプラグインには、要素全体の表示と移動を処理する JavaScript が含まれている可能性があります。これは、テキストがそれに付随することを意味します。

オプション1：

どのように見せたいのか正確にはわかりませんが、テキストを横に置き、画像と同じようにスライドさせたいように思えます. できることの 1 つは、2 つの.uds-bb-slides要素を持つことです。最初は画像付きの通常のものですが、テキストはありません。2 番目には、背景画像のないテキストのみが含まれます。次に、画像をスライドさせるイベントを、テキストをスライドさせるイベントに関連付けることができます。

クリックして画像をスライドさせるボタンがあるとします (実際にあるかどうかはわかりません)。jQuery を使用すると、次のようなことができます。

// This is jQuery
$('.btnSlideImage').click(function() { // when you slide the image...
    $('.btnSlideText').click(); // trigger text slide
});

彼らが使用するコードをコピーして、最初と同じイベントの 2 番目のスライダーに適用することもできます。

これに関する問題は、クリックをブロックしたり、デフォルトの背景を持つ可能性のある2番目のスライダーを取得することです. テキストが表示されるように、heightとwidthを0pxに設定し、 を設定するだけでよい場合があります。overflow: visible繰り返しますが、実際に何が起こっているのかを知らずに正確な詳細を示すことは困難です.

オプション 2:

独自のテキスト スライダーを記述して、適切な場所に配置できます。スライドする必要さえありません。おそらく、jQuery、CSS3、または純粋な JavaScript で行う方がはるかに簡単なフェードが機能するでしょう。

次に、オプション 1 のように、画像をスライドさせているものにイベント ハンドラーをアタッチできます。

// This is jQuery too
$('#whatever_makes_image_slide').click(function() {
    SlideMyText();
});
于 2012-09-27T09:37:52.793 に答える