这是更多数学问题,但我认为它不适合数学部分。
我用居中的数字渲染此框。
盒子的整个宽度是350px
。
我有最小和最大数字,例如 0-11
,然后除以 350/11
以获得每个框的宽度。
下面我有一个 slider ,宽度也是 350px
,拇指的宽度是 14px
。
我想要的是拇指位置始终以其上方框中的数字为中心。
问题:
中间的数字很好,它总是在拇指的中心,但当我向左或向右移动时,数字不再居中。
如何根据宽度值计算框内数字的位置?
最佳答案
要根据 slider 参数计算总框宽度:
box_width = (slider_width - slider_track_width) * num_sub_boxes/(num_sub_boxes - 1)
在您的情况下box_width = 350px,num_sub_boxes = 11
。如果您想从固定框宽度设置 slider 宽度,则可以反转公式:
slider_width = (1 - 1/num_sub_boxes) * box_width + slider_track_width
请注意, slider 拇指大小没有相关性(无论如何我认为 - 如果我错了请告诉我)。
关于javascript - 如何计算从左到中和从中到右的(增量)填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45552893/