1

我正在为员工页面编写叠加效果，该页面将显示员工的照片，然后当您单击照片时，文本会向右扩展，并且引用从照片下方滑下。如果照片不是第一个，则照片将滑到页面的左侧，而文本将从照片下方滑出。我似乎无法显示叠加层的背景颜色？我不确定我做错了什么。如果有人可以看一下并告诉我，我将不胜感激。

这是代码http://jsfiddle.net/BrentRansom/FLUPD/1/

CSS

#expand .bio-pic2 {
    position: absolute;
    top: 0;
    left: 0;
}

#expand {
    position: relative;
    width: 1000px;
    width: 0px;
    border: 1px solid black;
    display: none;
    background-color: #ffffff;
    z-index: 9999;
}

.bio-pic2 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 323px;
}

.testimonial {
    position: absolute;
    top: 333px;
    left: 0;
    font-size: 15px;
}

.desc {
    position: absolute;
    top: 10px;
    left: 333px;
}

.bio-pic {
    float: left;
    cursor: pointer;
    z-index: 9998;
    margin: 0 5px 0 0;
}

HTML

    <div id="expand">
        <div class="bio-pic">
            <img src="http://www.brent-ransom.com/photo-img.jpg" />
            <div class="bio-nt">
                <h2>Name</h2>
                <h3>Position</h3>
            </div>
        </div>
       <div class="testimonial">
               A testimonial!
        </div>
    </div>

    <div class="desc">
        This is a paragraph of text.
    </div>
    <div class="bio-pic">
        <img src="http://www.brent-ransom.com/photo-img.jpg" />
    </div>

JS

<script>
    $(".bio-pic").click(function() {
     $('.bio-pic2').toggle("slow");

    var menu = $("#expand")
    if ($(menu).is(":visible")) {
        $(menu).animate({width: 0}, 1000, function() {$(menu).hide();});
    } else {
        $(menu).show().animate({width: 500}, 1000);           
    }
});
</script>
4

1 回答 1

0

不完全清楚您要做什么，但是否与此类似？

首先，向#expand要显示为叠加层的 div 添加一个高度，它当前显示时没有任何高度。

#expand {
    position:absolute;
    width:1000px;
    border: 1px solid black;
    display: none;
    background-color:#ffffff;
    z-index:9999;
   height:323px;
}

当您的叠加层处于活动状态时，由于它的 z-index 高于您的实际照片 div，因此您不能再次单击它来重置叠加层，而是可以将点击事件绑定到叠加层本身上。

$(".bio-pic").click(function (e) {
    e.stopPropagation();
    //$('.bio-pic2').toggle("slow");
    var menu = $("#expand");
    $(menu).show().animate({
        width: 500
    }, 1000);
});
$("#expand").click(function () {
    $(this).animate({
        width: 0
    }, 1000, function () {
        $(this).hide();
    });
});

演示

于 2013-10-03T02:58:27.383 回答