6

ここで jsFiddleに設定された例があります.jQueryは現在、幅を固定ピクセル幅として設定しています。そのため、ブラウザの幅を狭くすると、バーが画面から右にはみ出します。私の質問は、代わりに jQuery で幅をパーセンテージに設定するにはどうすればよいですか?

<div class="bars">
    <div class="meter">
        <span style="width: 88%"></span>
    </div>
    <div class="meter">
        <span style="width: 62%"></span>
    </div>
</div>


$(".meter > span").each(function() {
    $(this)
        .data("origWidth", $(this).width())
        .width(0)
        .animate({
            width: $(this).data("origWidth")
        }, 3600);
});
4

3 に答える 3

4 
$(".meter > span").each(function() {
   $(this).data("origWidth", ($(this).width() / $(this).parent().width()) * 100)
          .width(0)
          .animate({ width: $(this).data("origWidth") + "%" }, 3600);
});

フィドル

于 2013-03-04T23:35:36.237 に答える
2

次のように、最初にこの 2 つの幅の間の相対的な割合を計算する必要があります。

var relativePercentage = ($(this).width()/$(this).parent('div').width())*100;

次に、これをターゲット幅として設定し、次のように数値を追加することを忘れないでください%(または で値を取得しますpx)。

$(this)
    .data("origWidth", $(this).width())
    .width(0)
    .animate({
        width: relativePercentage + '%'
    }, 3600);

ワーキングデモ

于 2013-03-04T23:38:44.517 に答える
1

必要なのはこれだけです:

LIVE DEMO

$(".meter > span").each(function() {
    $(this).animate({ width: $(this).data("width")+"%" }, 3600);
});

この HTML:

<span data-width="88"></span>

CSS で width を に設定し0%ます。

ウィンドウのサイズを変更しても、幅SPANは維持されます。%

于 2013-03-04T23:45:27.480 に答える