javascript - 当总宽度为动态时，在 jQuery 中正确定位 "reel"div

Question

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

分页器仅设置为特定宽度(在本例中为 340 像素)，这允许它显示大约十个页面按钮。如果用户选择了更高的页面，我希望卷轴向左滑动并在中心显示所选页面。由于页数是动态设置的(我在加载页面时在 js 中构建寻呼机)并且它们的宽度不是恒定的(两位数页码按钮比一位数按钮宽)我如何确定然后设置寻呼机到正确的位置？

我试图使用以下代码:

(我的按钮标有“#Nav1”、“#Nav2”等...)

if (currentPage < 7) {
    newPos = 0;
}
else {
    newPos = $('#Nav' + (currentPage-5)).position().left;
}

$('#reel').animate({left: newPos*-1}, 700);  

但是 #reel 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>

Answer 1

您需要手动为#reel 指定一个宽度，该宽度等于元素数 * 每个元素的宽度。

一个动态的方法是加载所有元素，将它们放在一个隐藏的、无边界的 div 中，然后将 #reel 的宽度设置为等于该 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});

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