Question

我有一个跨越容器宽度100％的比例，但比例本身只有10-90。我如何准确地说明这种差异？ IE：当我输入数据值为20时，如何让它正确地落在“20”标记上，而不是整体比例的20％？

     <div class="score-scale">
        <ul data-animate="colorScale" data-value="20" class="scaleColors">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <div class="scoreTick"></div>
          <div class="scoreArrow"></div>
        </ul>
        <ul class="scaleTicks">
          <li>10</li>
          <li>20</li>
          <li>30</li>
          <li>40</li>
          <li>50</li>
          <li>60</li>
          <li>70</li>
          <li>80</li>
          <li>90</li>
        </ul>
      </div>

这些是获得特定标记的百分比

0 = 10
12％= 20
24.5％= 30
37％= 40
49.5％= 50
61.5％= 60
74％= 70
86.5％= 80
99％= 90

Answer 1

您可以使用不同比例修复重新映射数字的百分比

function fixPercentage(val){
 var offsetMin = 10;
 var offsetMax = 90;
 val = (val - offsetMin)/(offsetMax - offsetMin) * 100;

return val;
}

并在通过您的固定号码后

检查这支笔 https://codepen.io/sassoli/pen/NvqdYG

获得具有差分宽度的精确比例？

1 个答案: