0

我正在使用 wordpress 插件来滑动图像和文本。这个横幅有一个内容区域（和所有的一样），其中显示幻灯片的图像。可以从后端添加文本和图像。允许文本显示在图像上。我的意思是文字将显示在图像上。

我想要做的是强制该内容区域之外的文本，以便在它之外显示它。

  <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被设置为溢出：隐藏，以便在内容中显示的滑动图像不会显示在内容之外。

这是未显示强制文本的问题。但是当在插件 js 文件中时，我让它溢出：可见。文本显示在外面，但横幅图像不仅显示在内容框中。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类，我把第二个误认为是第一个。

在这种情况下，您可能需要进行一些“黑客攻击”才能获得您想要的结果。该插件可能有一些 JavaScript 来处理整个.uds-bb-slide元素的可见性和移动，这意味着文本将随之而来。

选项1：

我不确切知道您希望它看起来如何，但在我看来，您希望文本位于侧面，但也像图像一样滑入。你可以做的一件事是有两个.uds-bb-slides元素。第一个将是带有图像的常规图像，但现在没有任何文本。第二个将只有没有背景图像的文本。然后，您可以将触发图像滑动的事件附加到导致文本滑动的事件。

假设有一个按钮（我不知道是否真的有一个），您可以单击它来滑动图像。你可以用 jQuery 做这样的事情：

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

您甚至可以复制他们使用的任何代码，然后将其应用到您的第二个滑块，以实现与第一个相同的事件。

这样做的问题是您获得了第二个滑块，它可能会阻止点击或具有默认背景。您可以只将heightand设置width为0px和 set overflow: visible，以便显示文本。同样，在不知道实际情况的情况下很难给出确切的细节。

选项 2：

您可以编写自己的文本滑块并将其放置在正确的位置。它甚至不必滑动——也许淡入淡出对你有用，使用 jQuery、CSS3 甚至纯 JavaScript 可能更容易做到。

然后，您可以将事件处理程序附加到导致图像滑动的任何内容，如选项 1 中所示：

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