Question

我正在使用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"});

由于

Answer 1

我不确定你对生成的标记有多大程度的控制，但是如果有可能的话，我会建议以某种方式让div与类uds-bb-description uds-undefined成为兄弟姐妹.uds-bb-slides的{{1}}，overflow: hidden。然后你可以尝试从那里定位它。

您可以将两者放在包含div和position: relative的包装器下，然后将两个子div元素设置为position: absolute，这样您就可以将它们放在相对于.uds-bb-slides的位置。容器

如果从插件更改输出标记太困难，您可以尝试使用JavaScript。 jQuery会让这项工作变得更容易，但并不是绝对必要的。

基本思想是移动DOM中的文本，使其不再是overflow: hidden的子项，因此不受.uds-bb-slides的影响。

修改

啊......我刚刚注意到你有.uds-bb-slide和.uds-bb-slide类，我误认为第二个是第一个。

在这种情况下，你可能需要做一些“黑客”来获得你想要的结果。该插件可能有一些JavaScript来处理整个.uds-bb-slides元素的可见性和移动，这意味着文本将与它一起使用。

选项1：

我不确切地知道你希望它看起来如何，但听起来像你想要文本在侧面，但也像图像一样滑入。你可以做的一件事是有两个// This is jQuery $('.btnSlideImage').click(function() { // when you slide the image... $('.btnSlideText').click(); // trigger text slide });元素。第一个是带图像的常规图像，但现在没有任何文字。第二个将只有没有背景图像的文本。然后，您可以将触发要滑动图像的事件附加到导致文本滑动的事件。

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

height

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

问题在于您获得了第二个滑块，可能会阻止点击或具有默认背景。您可以将width和0px设置为overflow: visible，然后设置// This is jQuery too $('#whatever_makes_image_slide').click(function() { SlideMyText(); });，以便显示文字。同样，如果不知道究竟发生了什么，很难提供确切的细节。

选项2：

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

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

{{1}}

横幅插件中隐藏/可见溢出

1 个答案: