代码之家  ›  专栏  ›  技术社区  ›  Renari

在progressbar上覆盖内容

  •  0
  • Renari  · 技术社区  · 6 年前

    ul {
      margin: 0;
      padding: 0;
    }
    .progress {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
    }
    li {
      position: relative;
      margin: 0;
      padding: 0;
    }
    .overlay{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 100;
    }
    <div>some header content</div>
    <ul>
      <li>
        <div class="overlay">
          <span>some stuff</span>
          <input/>
          <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
        </div>
        <progress class="progress"></progess>
      </li>
      <li>
        <div class="overlay">
          <span>some stuff</span>
          <input/>
          <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
        </div>
        <progress class="progress"></progess>
      </li>
    </ul>
    <div>some footer content</div>

    所以我要做的是让list元素的背景显示列表项处理的进度。您可以使用所选颜色的1x1像素图像并将其设置为背景图像。然后在进度更新时,将背景宽度设置为该进度值。

    HTML5现在有一个progressbar元素,所以我想知道用它实现相同的样式有多难。到目前为止,这是我所拥有的最好的,而且非常挑剔。有没有一个简单的方法来做我忽略的事情?如果不是这样的话,我最好还是用上面描述的老式方法来做。

    这里有一个最终目标类似的例子。

    let bgSize = 0;
    function increaseWidth() {
      bgSize++;
      let elements = document.getElementsByTagName('li');
      for(let i = 0; i < elements.length; i++) {
        elements[i].style.backgroundSize = bgSize + '% 100%';
      }
      if(bgSize < 100) {
        setTimeout(increaseWidth, 500);
      }
    }
    setTimeout(increaseWidth, 500);
    li {
      background-image: url('https://i.imgur.com/xnhGEBj.jpg');
      background-repeat: no-repeat;
      background-size: 0%;
      display: block;
      border: 1px solid #000;
      list-style-type: none;
    }
    ul {
      margin: 0;
      padding: 0;
    }
        <div>some header content</div>
        <ul>
          <li>
            <span>some stuff</span>
            <input/>
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
          </li>
          <li>
            <span>some stuff</span>
            <input/>
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
          </li>
        </ul>
        <div>some footer content</div>
    1 回复  |  直到 6 年前
        1
  •  1
  •   dysfunc    6 年前

    试试这个:

    JS公司

    let bgSize = 0;
    let timer = null;
    
    function increaseProgressBar () {
      bgSize++;
    
      const elements = document.getElementsByTagName('progress');
    
      for(let i = 0; i < elements.length; i++) {
        elements[i].value = bgSize;
      }
    
      if(bgSize < 100) {
        timer = setTimeout(increaseProgressBar, 500);
      }else{
        clearTimeout(timer);
        timer = null;
      }
    }
    
    timer = setTimeout(increaseProgressBar, 500);
    

    CSS

    ul {
      margin: 0;
      padding: 0;
    
      li {
        border: 1px solid #000;
        display: block;
        list-style-type: none;
        position: relative;
    
        progress {
          left: 0;
          position: absolute;
          right: 0;
        }
    
        progress[value] {
          appearance: none;
          height: 100%;
          width: 100%;
          z-index: -1;
          -webkit-appearance: none;
    
          &::-webkit-progress-bar {
            background-color: #fff;
          }
        }
      }
    }
    

    HTML格式

    <div>some header content</div>
    <ul>
      <li>
        <span>some stuff</span>
        <input/>
        <progress value="0" max="100"></progress>
        <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
      </li>
      <li>
        <span>some stuff</span>
        <input/>
        <progress value="0" max="100"></progress>
        <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
      </li>
    </ul>
    <div>some footer content</div>
    

    Demo