javascript - 帮助 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 做的事情不太满意，但在不改变标记的情况下它仍然有效。