javascript - 以晕影效果方式计算跨度不透明度

Question

我有一个具有七个日期跨度的 flex 容器。我希望中心日期跨度(标记为蓝色)的不透明度为 1，并且中心的每个后续跨度都减少其不透明度。

我正在尝试想出一个简单的算法来在非固定长度的日期跨度上动态地执行此操作。

i.e. Opacity values

0.1, 0.3, 0.6, |1|, 0.6 0.3 0.1

要得到这个结果:

显然在这个例子中我有日期跨度的长度 [7] 和每次迭代的值 [0, 1, 2 ...6]

Answer 1

假设您的 HTML 结构如下，我们有:

const nav = document.getElementById('nav')
const maxOpacity = 1
const divs = nav.querySelectorAll('div')
const range = maxOpacity/divs.length*2

const opacities = Array(divs.length).fill(1)

for(var i=0; i<opacities.length;i++) { 
  let res = range*(i+1)

  if(res >= 1) {
    opacities[i] = 1
    break
  }
  opacities[i] = res
}

for(;i<opacities.length;i++) {
  opacities[i] = opacities[opacities.length - 1 - i]
}


nav.querySelectorAll('div').forEach((div, index) => {
  div.style.opacity = opacities[index]
})

#nav {
background: green;
display: flex;
flex-direction: row;
justify-content: space-around;
}

#nav div {
color: white;
}

<div id="nav">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  
  <div>Item 5</div>
  
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
</div>