Javascript 定位a"；卷轴；当总宽度为动态时，在jQuery中正确div

我正在用Javascript和jQuery编写自己的小型寻呼机控件，但很难正确定位它

寻呼机仅设置为特定宽度（本例中为340px），允许其显示大约十个页面按钮。如果用户选择了较高的页面，我希望卷轴向左滑动，并在中间显示所选页面。由于页面数量是动态设置的（我在加载页面时用js构建了寻呼机），并且它们的宽度不是恒定的（两位数的页码按钮比一位数的按钮宽），我如何确定并将寻呼机设置到正确的位置

我试图使用以下代码：

（我的按钮标有“导航1”、“导航2”等。）

if（当前页面<7）{
newPos=0；
}
否则{
newPos=$（'#Nav'+（当前第5页））.position（）.左；
}
$（'#revel'）。制作动画（{left:newPos*-1}，700）；

但是#卷筒div正在包装，因此position（）.left不会返回我需要的位置

建议

以下是我的HTML/CSS标记：

<style type="text/css">    
    div#pager div
    {
        display: inline-block;
    }

    #navContainer
    {
        width: 340px;
        height: 28px;                
        overflow: hidden;   
        position: relative;     
    }

    #reel
    {
        position: absolute;
        top: 0;
        left: 0;        
    }

</style>
<div id="pager" class="buttons">
    <div id="preButtons"></div>
    <div id="navContainer">
        <div id="reel">
        </div>
    </div>
    <div id="postButtons"></div>
</div>

分区#传呼机分区
{
显示：内联块；
}
#导航集装箱
{
宽度：340px；
高度：28px；
溢出：隐藏；
位置：相对位置；
}
#卷轴
{
位置：绝对位置；
排名：0；
左：0；
}

您需要手动为“卷轴”指定一个宽度，该宽度等于项目数量*每个项目的宽度

一种动态方法是加载所有项目，将它们放置在一个隐藏的、无边界的div中，然后将#revel的宽度设置为该div的宽度

请在您的转盘代码之前尝试以下操作：

var dummyDiv = $('<div id="dummy" class="buttons" style="position:absolute;display:none"></div>');
dummyDiv.appendTo('body');
dummyDiv.html($('#reel').html());
var reelWidth = dummyDiv.css('width');
$('#reel').css({'width':reelWidth});

var dummyDiv=$（''）；
dummyDiv.附录（“主体”）；
html（$（'#reel'）.html（））；
var reelWidth=dummyDiv.css（'width'）；
$（'#reel'）.css（{'width'：reelWidth}）；

---

这将允许您动态设置#reel div的宽度，以便它不会在静态不知道内容的确切大小的情况下进行包装。

Brilliant John，这一点非常准确！实际上，只有近乎完美：）虚拟div仍然在我的窗口/文档宽度处缠绕。我如何阻止它这样做？哇，你有很多分页链接！：-）将虚拟div放在页面左侧一些较大的位置就可以了。虽然，在某一点上，你可能会考虑懒惰加载这些东西上滚动或想出一些其他方式来做你想做的事情。我有点担心表现。

var dummyDiv = $('<div id="dummy" class="buttons" style="position:absolute;display:none"></div>');
dummyDiv.appendTo('body');
dummyDiv.html($('#reel').html());
var reelWidth = dummyDiv.css('width');
$('#reel').css({'width':reelWidth});