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根据屏幕宽度定位的，所以我尝试使用这个脚本根据firstdiv 定位它。

$(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这很好，但是当我们更改输入值时，无法根据firstdiv 获得准确的百分比定位。

例如，如果我给出 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 回答