Question

所以我正在创建一个可搜索的视频进度条，我需要播放头周围有一个透明的边框，但是它会屏蔽包含它的进度条并显示基础视频。这是我需要做的图表。

enter image description here

假设对角线代表进度条下方播放的视频，您可以看到播放头周围的边框应如何屏蔽进度条。有一个很好的浏览器安全方法吗？

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属性是x1,y2,x2,y2元素中的.seeker坐标。 null表示我们希望完全保留y轴，并且仅限制这两个坐标之间的水平移动。

这应该是你所需要的一切。

Here's the jsFiddle

如何使div掩码成为其父级的背景

1 个答案: