我有一个横跨容器宽度 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
最佳答案
您可以修复您的百分比,重新映射具有不同比例的数字
function fixPercentage(val){
var offsetMin = 10;
var offsetMax = 90;
val = (val - offsetMin)/(offsetMax - offsetMin) * 100;
return val;
}
然后通过你的固定号码
关于jquery - 获得具有不同宽度的准确比例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45333686/