我正在开发一个自定义 Angular 组件,目前看起来如下所示:
你在左边看到的小绿色部分是我尝试有一个单独的 div
重叠,这样当我点击其中一个白色圆形选择器时,绿色会被填满直到那个点.
这是我的代码:
var shell = document.querySelector('.shell');
var inner = document.querySelector('.inner-shell');
shell.addEventListener('click', function(ev) {
alert("in");
if (ev.path && ev.path[0].className === 'indicator') {
var targetNode = ev.srcElement;
var centerX = targetNode.offsetLeft + targetNode.offsetWidth;
var centerY = targetNode.offsetTop + targetNode.offsetHeight;
inner.style.width = `${centerX + 40}px`;
}
});
.inner-shell {
background-color: #6FBC92;
width: 50px;
transition: 1s;
}
.shell {
background-color: #DCDCDC;
border-radius: 20px;
display: inline-flex;
}
.indicator {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 20px;
height: 13px;
margin: 3px 28px;
width: 13px;
}
<div class="inner-shell">
<div class="shell">
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
</div>
这是我通过上面的代码得到的结果(我点击了最后一个指示器以进入该状态):
我怎样才能将 inner-shell
放在 shell
之上,但仍在 indicators
之下?
谢谢
最佳答案
您可以将inner-shell
放在shell
中并使用position:absolute
在指标上重叠
查看代码片段:
var shell = document.querySelector('.shell');
var inner = document.querySelector('.inner-shell');
shell.addEventListener('click', function(ev) {
if (ev.path && ev.path[0].className === 'indicator') {
var targetNode = ev.srcElement;
var centerX = targetNode.offsetLeft + targetNode.offsetWidth;
var centerY = targetNode.offsetTop + targetNode.offsetHeight;
inner.style.width = `${centerX + 40}px`;
}
});
.shell .inner-shell {
background-color: #6FBC92;
width: 10px;
transition: 1s;
position: absolute;
top: 0;
left: 0;
display: inline-block;
height: 100%;
border-radius: 20px;
}
.shell {
background-color: #DCDCDC;
border-radius: 20px;
display: inline-flex;
position: relative;
}
.indicator {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 20px;
height: 13px;
margin: 3px 28px;
width: 13px;
position:relative;
z-index:111;
}
<div class="shell">
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="inner-shell"></div>
</div>
关于javascript - 如何为 div 上的背景颜色填充设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50701383/