0

ページの下部にスライダーがあり、左から右にドラッグしてビューポートを移動できる Web ページを作成しようとしています。ここで達成しようとしていることの簡単な図を描いてみました。

ここに画像の説明を入力

赤いボックスはドラッグ可能なスライダーです。ユーザーはこの赤いボックスを左右にドラッグできる必要があり、これはメイン ビューポートの画像と一致する必要があります。これに利用できるプラグインはありますか？

現時点では、jquery-ui ドラッグ可能なプラグインを使用してスライダーを処理することを検討していますが、ビューポートの操作方法がわかりません。

スライダーによって移動した距離をキャプチャし、その値に乗数を適用してビューポートを正しい量だけ移動させることができると考えていますが、これが賢明なアイデアであるかどうかはわかりませんか?

これを達成するための最良の方法は何ですか？

ありがとう

4

2 に答える 2

1

下部にあるスクロール バーのjQuery UI スライダーから開始できます。

ニーズに合わせて変更します (CSS の微調整)

メソッドを使用$('.viewport')[0].scrollLeft = xposすると、右の x 位置にスクロールできます。

以下に例を示します: http://jsfiddle.net/Vandeplas/zAJtL/

js:

var percentage = 50;

$('.scrollTo').click(function(){
    var vp = $('.viewport')[0];
        vp.scrollLeft = (percentage / 100) * vp.scrollWidth;
    console.log(vp.scrollWidth);
});

CSS:

.viewport {
    width: 200px;
    height: 40px;
    overflow: auto; /* set to hidden to hide the default scrollbar*/
}

html:

<div class="viewport"> azertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwerty </div>
<input class="scrollTo" type="button" value="scroll"/>

更新:スライダー付き: http://jsfiddle.net/Vandeplas/zAJtL/1/

于 2013-07-04T10:49:04.560 に答える
0

誰かが疑問に思っている場合に備えて、これをベースとして使用して解決策を見つけることができました: http://jeffschuette.com/2011/05/02/jquery-ui-slider-tutorial/

同じことを達成しようとしている他の人に役立つことを願っています！

于 2013-07-04T16:15:54.520 に答える