Mootools Gallery帮助-过渡文本

Question

我不确定我想要的是否可能，但我使用的是Mootools图片库，其中you can see an example of here：

</script> 
    function startGallery() {
        var myGallery = new gallery($('myGallery'), {
            timed: true,
            showArrows: false,
            showCarousel: false
        });
    }
    window.addEvent('domready', startGallery);
</script> 

上面是图库旋转，但理想情况下，我希望实现的是第二个文本元素(具有白色背景)比顶部文本元素更宽，这样它看起来更像下面的图片。

有很多Javascript涉及，所以我不知道我应该在这里张贴什么来帮助人们，但只要让我知道我应该在这里放什么，我会回来编辑的。

或者，如果有人知道在jQuery中有类似的东西，可以让我得到同样的效果，但不需要太多的JS编码，我将非常感激。

一如既往地提前谢谢你，丹

Answer 1

试试这个css，看看它是不是你想要的。

.slideInfoZone {
    position: absolute;
    z-index: 10;
    width: 100%;
    margin: 0px;
    left: 0;
    top:40px;
    color: #FFF;
    text-indent: 0;
    overflow: hidden;
    padding: 10px 0 0 20px;
    height: 70px;
}

.slideInfoZone h3{
    background: #000; 
    width: 200px; 
    padding: 30px; 
    margin-left: -30px; 
    display:inline;
}

.slideInfoZone p {
    position: absolute;
    bottom: 0;
    background: #FFF;
    font-size: 14px;
    color: #000;
    margin: 20px 0 0 -20px;
    padding: 10px 0 10px 20px;
    width: 50%;
}

基本上，我所做的就是删除包含元素的背景色，然后给p标记一个bg颜色，并修改h3的填充/边距。我对我不得不用h3做的事情不太满意，但根本不改变标记，它就能工作。