Question

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

寻呼机设置为特定宽度（在这种情况下为340px），允许它显示大约十个页面按钮。如果用户选择了更高的页面，我希望卷轴向左滑动并在中心显示所选页面。由于页面的数量是动态设置的（我在加载页面时用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的宽度，以便在不知道静态内容的确切大小的情况下不会换行。

当总宽度是动态时，在jQuery中正确定位“reel”div

1 个答案: