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所做的事情不太满意，但根本没有改变标记。

帮助Mootools Gallery - 过渡文本

1 个答案: