如何根据随附滑块的值填充图像？

Question

我有一个设计要求，需要根据滑子的值制作一个充满蓝色的瓶子。我对如何解决这个问题感到很困惑。任何帮助表示赞赏。

Answer 1

这可以简单地通过某种百分比范围来完成。您也可以使用两个图像。一个装满空瓶子，一个装满并覆盖它们。应该很容易做到...

下面是一个示例：

let from = document.querySelector('#from'),
    to = document.querySelector('#to'),
    filling = document.querySelector('.filling');

[from, to].forEach(input =>
  input.addEventListener('keyup', () => {
    filling.style.top = from.value + '%';
    filling.style.height = (to.value - from.value) + '%';
  })
);

.bottle {
  position: relative;
  width: 50px;
  height: 125px;
  border: 1px solid #ccc;
  background: #fefefe;
}

.filling {
  position: absolute;
  width: 100%;
  background: blue;
  top: 15%;
  height: 50%;
};

from: <input id="from" value="15" />% - to: <input id="to" value="75" />%

<br /><br />

<div class="bottle">
  <div class="filling"></div>
</div>

或者，另一种方法是，您可以计算空零件，而不是计算填充量。这可以使以下工作更加容易。但这属于您的任务。

let emptyTop = document.querySelector('.top'),
    emptyBottom = document.querySelector('.bottom');

document.querySelector('#from').addEventListener('keyup', e => {
  emptyTop.style.height = e.target.value + '%';
});

document.querySelector('#to').addEventListener('keyup', e => {
  emptyBottom.style.height = (100 - e.target.value) + '%';
});

.bottle {
  position: relative;
  width: 50px;
  height: 125px;
  border: 1px solid #ccc;
  background: blue;
}

.top, .bottom {
  position: absolute;
  width: 100%;
  background: #fff;
}

.top {
  top: 0;
  height: 15%;
}

.bottom {
  bottom: 0;
  height: 25%;
}

from: <input id="from" value="15" />% - to: <input id="to" value="75" />%

<br /><br />

<div class="bottle">
  <div class="top"></div>
  <div class="bottom"></div>
</div>

Answer 2

我建议您创建一个position: relative父级（类bottle）和一个position: absolute子级（类filling）。设置孩子的风格：

width: 100%;
overflow: hidden;

，并为其分配top和height以匹配您的填充顶部和高度。