2

私は div と呼ばfirstれる幅を動的に、左右のマージンに応じて水平方向に中央 揃えにすることができます。

.first
{
    width:70%;
    background-color:#5b9a68;
    position:relative;
    margin:0 auto;
}

second位置を持つ別の divfixed

.second
{
    position:fixed;
    background-color:black;
    color:white;
    left:input;
}

HTML

<div class="first">content</div>
<div class="second">Left Value</div>

このseconddiv を div に従って配置するfirst必要があります。ここでの問題はseconddiv の位置です。fixed画面の幅に応じて配置されているため、このスクリプトを div に従って配置しようとしましたfirst。

$(document).ready(function(){
    var input=0;

    var first_width = $(".first").width() / $('.first').parent().width() * 100;  
    var pos = (100-first_width)/2;//getting the empty part
    var ex_pos=pos+input;

    $('.second').css("left",ex_pos+"%");

});

ここで、入力がゼロの場合、div の先頭から開始する必要がありますfirstが、これは問題ありませんが、入力値を変更すると、div に従って正確なパーセンテージの位置が得られませんfirst。

たとえば、入力として 50 を指定すると、65 に配置されますが、この方法ではfirstdiv の 50 に完全に配置されません。また、入力として 100% を指定すると、これは外に出ます。

入力が 100 の場合にこれを行う方法、seconddiv は div の最後にある必要がありますfirst。入力が 50 の場合、その中間にあるはずfirstです。

出力 0% 左位置

出力 50% 左位置

出力 100% 左位置

注-css を変更または編集したくありません。スクリプトだけでやりたいです。 フィドルをチェック

4

2 に答える 2

4

どうぞ ：

$(document).ready(function () {
    var input = 0,
        firstWidth = $('.first').width(),                    // width of first div
        secondWidth = $('.second').width(),                  // width of second div
        offset = (input * (firstWidth - secondWidth)) / 100, // % to shift
        leftPos = $('.first').offset().left;                 // left position of first div

    $('.second').css("left", leftPos + offset);
});

JSFiddle

jQuery APIドキュメントから：リンク

.offset() メソッドを使用すると、ドキュメントに対する要素の現在の位置を取得できます。
プロパティ top と left を含むオブジェクトを返します。

そう ： 

leftPos = $('.first').offset().left;

.first divこれにより、開始点の左座標が得られます。

于 2013-09-13T13:46:51.933 に答える
0

50% と 100% のシナリオを探していると思います。

これはそれを行う必要があります:

JS:

if(input===100){
    ex_pos = ex_pos - 43;
}else if(input===50){
    ex_pos = ex_pos - 13;
}

フィドル

于 2013-09-13T13:21:48.043 に答える