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 (パーセンテージではなく 1 あたり) です。

このパーセンテージは、ルーラーの高さからルーラー コンテナーの高さを引いたものです。しかし、744*2/12px を削除したので、ここにも追加する必要があります (その後、-1 を乗算するため、その減算です)。

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