1

このクライアント側のウィジェットスライダーをjavascriptで作成しようとしています。

ユーザーが質問に答えると、スライダーが増加します。

スライダーの背景を拡大および縮小しても問題ありませんが、「65％」インジケーターが青色のdivの最後に「固定」され、スライダーの背景として自動的に移動するかどうかはよくわかりません。成長し、縮小します。

これはJavaScriptなので、インジケーターの絶対位置を動的に設定するのが得意です。OK、まだ何も試していません。これを実現する方法はたくさんあると思うので、意見を聞きたいと思いました。私はqTipを使用することも考えています...しかし、別のボックスに固定されたフローティングボックスとしてcssを使用してこれを見るのは素晴らしいことです

2つの並列divの幅を変更することを想像しています（完了と未完了）。インジケーターはコンテナーに対して絶対的に配置され、幅の変更に応じて移動します。

可能？

これが私が話していることです：

ここに画像の説明を入力してください

実例（フィリップの答えに感謝）

http://jsfiddle.net/HP7V9/

4

1 に答える 1

2

おそらく、jQueryを使用して、ロードされたdivの右側と、その高さの中間点にアンカーします。

したがって、このDOMがあるとしましょう。

次に、バーのサイズを変更するロジックがすでにあると仮定すると、このjQueryは次のトリックを実行します。

$("#loaded").resize(function(){
    var loadedDiv = $("#loaded");
    var loadedPosition = loadedDiv.position();
    var percentXPos = loadedPosition.left + loadedDiv.width() - $("#percent").width()/2;
    var percentYPos = loadedPosition.top + loadedDiv.height() / 2 - loadedDiv.height() / 2;

    $("#percent").css({
        position: "absolute",
        top: percentYPos.toString() + "px",
        left: percentXPos.toString() + "px"
    });
});

また、ロードされていない部分にdivを設定する理由はないと思います。バー全体のdivを作成し、背景を黒にしてから、ロードされたdivに高いz-indexと異なる背景色を指定する必要があります。

要素のマージン、パディングなどによっては、微調整が必​​要になる場合があることに注意してください。

于 2012-08-02T19:30:53.997 に答える