1

我正在尝试对高度选择器的这种棘手输入进行数学计算。

基本上 - 我有一个 jQuery UI 滑块来选择一个高度。它以英寸为单位递增，最小值为 0，最大值为 120（10 英尺高）。

随着用户移动滑块，相应的标尺图形移动。

我已经建立了一个 jsfiddle 到目前为止我在这里：http: //jsfiddle.net/x57Rw/

你可以看到我的数学有点偏离那里。我知道我需要缩放标尺图形的偏移量，但不能完全围绕它。基本上是在寻找我需要调整的内容以使标尺与滑块输入（相当）正确匹配。它不必完全准确，但尽可能接近。任何帮助将不胜感激！

4

2 回答 2

2

您的滑块需要向下一点边距以与标尺的底部对齐，如下所示：

        #height-slider.ui-slider-vertical .ui-slider-handle {
            left: -.8em;
            margin-bottom: -16px;
            ...
        }

您应该除以 144，而不是除以 120，因为您的标尺图像实际上包含 144 英寸，并且您的滑块也应设置为最大值 144：

function animateRulerOffset(sliderValue) {
    pixelOffset = 622-((sliderValue*622)/144);
    ...
}

如果您真的只想要 120 英寸，那么您的标尺图像需要修改为在 10 英尺处结束。

于 2012-08-10T17:14:32.947 回答
2

见http://jsfiddle.net/x57Rw/14/

标尺的高度是 744px，它有 12'。

最大值是 10'，所以我们必须删除 2'->744*2/12 px（好吧，我们添加它们，因为之后我们乘以 -1）。

然后，我们需要一个百分比。最大值为 120，因此 1-sliderValue/120（嗯，它是每一个，而不是百分比）。

这个百分比乘以标尺的高度减去标尺容器的高度。但是我们删除了 744*2/12px，所以我们也必须在这里添加它（嗯，它的减法，因为之后我们乘以 -1）：

pixelOffset = (744-112-744*2/12)*(1-sliderValue/120)+744*2/12;
于 2012-08-10T17:31:31.723 回答