jquery - 获得具有不同宽度的准确比例？

Question

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

示例:https://codepen.io/anon/pen/jLPrMP

     <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