jquery - 如何使一个div蒙版其 parent 的背景

Question

<分区>

Answer 1

我们首先创建视频容器。然后，我们创建一个容器来容纳搜索者。搜索器包含构成“滚动条”的 3 个部分。左行、搜索按钮和右行。

<div class="video">
    <div class="container">
        <div class="seeker">
            <div class="left-line"></div>
            <div class="seek-button"><a href="#"></a></div>
            <div class="right-line"></div>
        </div>
    </div>
</div>

然后 CSS 来创建您想要的效果:

.video{
    width:920px;
    height:300px;
    position:relative;
    border-radius:3px;
    border:1px solid #ccc;
    background:#ecebeb;
    overflow:hidden;
}
.container{
    width:90%;
    height:90%;
    margin:5%;
    overflow:hidden;
    position:relative;
}
.seeker{
    width:90%;
    position:absolute;
    bottom:25px;
    left:5%;
    height:15px;
}
.left-line{
    width:200%;
    height:100%;
    position:absolute;
    left:-154%;
    background:#000;
}
.right-line{
    height:100%;
    width:200%;
    position:absolute;
    right:-154%;
    background:#000;
}
.seek-button{
    width:8%;
    height:25px;
    position:absolute;
    left:50%;
    margin-left:-4%;
    margin-top:-5px;   
}
.seek-button a{
    display:block;
    height:100%;
    width:10px;
    background:#000;
    position:absolute;
    left:50%;
    margin-left:-5px;
}

在 css 中需要注意的只是左右偏移量。我们只是简单地创建与元素区域一样大的线，然后将它们向左和向右偏移。由于我们对所有内容的宽度都使用 % 值，因此这是响应式的..

最后但同样重要的是，包括 jQUery UI 库并利用 draggable 函数，声明一个句柄并排除除从此句柄之外的所有拖动:

$('.seeker').draggable({
    axis: 'x',
    handle: '.seek-button a',
    containment: [-280, null, 475, null]
});

上面的containment 属性是.seeker 元素中的x1,y2,x2,y2 坐标。 null 表示我们希望完全保留 y 轴，只限制这两个坐标之间的水平移动。

这应该就是您所需要的。

Here's the jsFiddle