我有一个带有Javascript生成控件的HTML视频播放器(带有SVG图形的背景图像)。我在使用css calc()
函数时遇到问题,需要根据视频控件栏调整div的大小。因此,当窗口扩展/收缩时,控件需要相应地进行调整。
控制div:
//Controls Wrapper
videoObj.controlsWrapper = document.createElement("div");
videoObj.controlsWrapper.className = "video-controls";
控件是动态生成的,因此,例如,播放按钮由此生成:
videoObj.playBtn = document.createElement("button");
videoObj.playBtn.className = "play btn";
所以问题是如何将播放按钮(这是SVG图形的背景)的大小调整为控件包装div高度的百分比(约25%)。
答案 0 :(得分:1)
这是最简单的方法...尝试调整框大小:) 父母是亲戚。孩子是绝对的。将top,left,right和bottom all设置为0实际上将创建蜘蛛网效果(或拉伸效果)。我使用不同的像素,所以你可以看到反应。否则孩子将覆盖父母。希望这会有所帮助。
.parent{
position: relative;
width: 100px;
height: 100px;
background-color: red;
}
.child{
position: absolute;
top: 3px;
bottom: 20px;
left: 3px;
right: 20px;
background-color: green;
}
<div class="parent">
<div class="child"></div>
</div>
要测试这是否有效,您可以使父级可调整大小:
$('.parent').resizable();
答案 1 :(得分:0)
将其大小调整为父div
高度的25%相对容易,但只能使用脚本语言。至于CSS允许calc()
,它不支持拉动指定元素的大小。
这是我为你拼凑的简单剧本:
window.onload = function() {
resize();
}
window.onresize = function() {
resize();
}
function resize() {
document.getElementsByClassName('play')[0].style.width = (document.getElementsByClassName('timeline')[0].offsetHeight * .25) + 'px';
}
JSFiddle:http://jsfiddle.net/zq2vzkk5/
我建议您使用id
来标识要从中提取值的元素,但如果元素的位置在页面上不会改变,那么class
就可以了。您只需要更新要从中提取值的class
的哪个实例。
如果你想要一个jQuery变体,我也可以提供它。
我希望这会有所帮助。
修改强>:
这是jQuery变体:
$(function() {
resize();
$(window).resize(function() {
resize();
});
});
function resize() {
$('.play').first().width($('.timeline').first().outerHeight() * .25);
}
JSFiddle:http://jsfiddle.net/s51vrca2/
答案 2 :(得分:0)
你可以在没有JS的情况下做到这一点:
.play {
height: 25%;
}