仅限CSS的方式：

Question

我有一个带有七个日期跨度的弹性容器。我希望中心日期跨度（标记为蓝色）的不透明度为1，并且每个后续跨度从中心开始减少其不透明度。

我正在尝试使用一种简单的算法在非固定长度的日期范围内动态执行此操作。

即。   不透明度值

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>

Answer 2

这是一个使用一些花式数学计算不透明度的小函数：

function getOpacity(length, index) {
  return Math.sin((1 / (length - 1) * index) * Math.PI);
}

您只需传递<span>的计数和当前的指数。

解释

首先，该函数将从0到1的“比例”计算项目的位置。第一个为0，中间为.5，最后一个为1。然后，该值将乘以π（Math.PI）。结果将传递给Math.sin，创建如下输出：

https://ggbm.at/m6zRvScc

Answer 3

^{看到那些微小的箭头后，我想你想动态设置那些不透明度，同时滚动父。}
我将向您展示两个想法，一个使用仅限CSS ，另一个使用 JavaScript （jQuery）

仅限CSS的方式：

使用“click-trough”功能添加渐变背景叠加 DIV

/*QuickReset*/* {margin:0;box-sizing:border-box;}html,body {height:100%;font:14px/1.4 sans-serif;}

.scrollWrapper {
  position: relative;
}
.scrollWrapper:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 40px; /* any height just to cover the .date text */
  top: 0;
  left: 0;
  pointer-events: none; /* let click go-trough */
  /* http://colorzilla.com/gradient-editor/#29dca4+0,000000+50,29dca4+100&1+0,0+50,1+100 */
  background: -moz-linear-gradient(left, rgba(41,220,164,1) 0%, rgba(0,0,0,0) 50%, rgba(41,220,164,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(41,220,164,1) 0%,rgba(0,0,0,0) 50%,rgba(41,220,164,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(41,220,164,1) 0%,rgba(0,0,0,0) 50%,rgba(41,220,164,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29dca4', endColorstr='#29dca4',GradientType=1 ); /* IE6-9 */
}
.scroll {
  background: #29DCA4;
  overflow: hidden;
  overflow-x: scroll;
  white-space: nowrap;
}
.date {
  display: inline-block;
  line-height: 65px;
  margin: 0 15px;
  color: #fff;
}
.date:first-child { margin-left: 50%;}
.date:last-child { margin-right: 50%;}

.date b { color: #2D476A;}

<div class="scrollWrapper">
  <div class="scroll">
    <span class="date"><b>10</b> 2/15/2018</span>
    <span class="date"><b>20</b> 2/15/2019</span>
    <span class="date"><b>30</b> 2/15/2020</span>
    <span class="date"><b>40</b> 2/15/2021</span>
    <span class="date"><b>50</b> 2/15/2022</span>
    <span class="date"><b>60</b> 2/15/2023</span>
    <span class="date"><b>70</b> 2/15/2024</span>
    <span class="date"><b>80</b> 2/15/2025</span>
    <span class="date"><b>90</b> 2/15/2026</span>
    <span class="date"><b>10</b> 2/15/2027</span>
    <span class="date"><b>20</b> 2/15/2028</span>
  </div>
</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

JavaScript方式

获取可滚动的父宽度并获取中心坐标（width / 2）
获取每个.date并访问.css() "opacity"属性并返回0到1的值，这是迭代的子中心距离的结果父母中心：

var $date = $(".scroll .date");

function setDatesOpacity() {
  var center = $(this).width() / 2;         // Calculate parent center

  $date.css("opacity", function() {
    var bcr = this.getBoundingClientRect(); // Get this rect values
    var x = bcr.left + bcr.width / 2;       // Get this center x
    return Math.max(0, 1 + -Math.abs((x - center) / center)); // Return new opacity
  });
}

$(".scroll").on("scroll", setDatesOpacity); // Do on parent scroll
$(window).on("resize", setDatesOpacity);    // Do if window resizes
setDatesOpacity();                          // Do once when possible

/*QuickReset*/
* {margin:0;box-sizing:border-box;}
html,body {height:100%;font:14px/1.4 sans-serif;}


.scroll {
  background: #29DCA4;
  overflow: hidden;
  overflow-x: scroll;
  white-space: nowrap;
}

.date {
  display: inline-block;
  line-height: 65px;
  margin: 0 15px;
  color: #fff;
}

.date:first-child {
  margin-left: 50%;
}

.date:last-child {
  margin-right: 50%;
}

.date b {
  color: #2D476A;
}

<div class="scroll">
  <span class="date"><b>10</b> 2/15/2018</span>
  <span class="date"><b>20</b> 2/15/2019</span>
  <span class="date"><b>30</b> 2/15/2020</span>
  <span class="date"><b>40</b> 2/15/2021</span>
  <span class="date"><b>50</b> 2/15/2022</span>
  <span class="date"><b>60</b> 2/15/2023</span>
  <span class="date"><b>70</b> 2/15/2024</span>
  <span class="date"><b>80</b> 2/15/2025</span>
  <span class="date"><b>90</b> 2/15/2026</span>
  <span class="date"><b>10</b> 2/15/2027</span>
  <span class="date"><b>20</b> 2/15/2028</span>
</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

以上只是概念证明，您应该通过以下方式进行改进：

限制.date元素的数量（仅限于可见元素）
在窗口调整大小时不要做很多事情但是一旦完成调整大小
使上述内容可扩展为任意数量的.scroll元素（目前仅适用于一个）

以小插图效果方式计算跨度不透明度

3 个答案:

解释

仅限CSS的方式：

JavaScript方式