javascript - 在屏幕内检测 div

Question

我正在制作这样的菜单: http://jsfiddle.net/ud100m3t/1/

我对此有疑问，你怎么看，当你按向右箭头几次时，菜单正在滚动，空白区域在你完成移动后被填充(在 maxState 变量中设置，总菜单元素)。

我想让这种行为有所不同:当最后一个元素出现在屏幕上并且您再次按下右键时，菜单会重置(就像现在当您按下 7 次时，菜单会滚动到相反的方向并从另一侧开始)。

当前输出:http://screencast.com/t/MS9H0ByPr期望的输出:http://screencast.com/t/1rHbgr6ZEuJ

这是我的示例菜单:

<nav id="sub" class="clearfix">
<div id="lefty">&lt;</div>
<div class="container_element">
    <div class="inner_container">
    <a href="#"><div class="box">Estimate</div></a>
    <a href="#"><div class="box">About</div></a>
    <a href="#"><div class="box">Customer Information</div></a>
    <a href="#"><div class="box">Financing</div></a>
    <a href="#"><div class="box">Careers</div></a>
    <a href="#"><div class="box">Locate Us</div></a>
    <a href="#"><div class="box">Inspiration</div></a>
    </div>
</div>
<div id="righty">&gt;</div>
</nav>

这是我的 javascript 代码:

 $(function(){
    var state = 0;
    var maxState = 7;
    var winWidth = $(window).width();
    $(window).resize(function(){
        winWidth = $(window).width();
        $('.container_element').width(winWidth-100);
        $('.container_element').scrollLeft((winWidth-100)*state);
    }).trigger('resize');
    $('#lefty').click(function(){
        if (state==0) {
           state = maxState;
        } else {
           state--;
        }
        $('.container_element').animate({scrollLeft:($(".box").width()*state)+'px'}, 800);
    });
    $('#righty').click(function(){
        if (state==maxState) {
           state = 0;
        } else {
           state++;
        }
        $('.container_element').animate({scrollLeft:($(".box").width()*state)+'px'}, 800);
    });
});

(你可以看到 fiddle 里的css)

我尝试了一些奇怪的屏幕宽度和框宽度的组合，但我只打破了更多的菜单。任何想法或帮助继续这个？谢谢

Answer 1

不确定这是否能解决您的问题，但为了安全起见，我会检查 state变量 <=和 >= :

$('#lefty').click(function(){
    if (state <= 0) {
    // [...]
});
$('#righty').click(function(){
    if (state >= maxState) {
    // [...]
});

您也可以用更短的代码替换这些 if 语句，如下所示:

$('#lefty').click(function() {
    state = (state <= 0) ? maxState : state - 1;
    // [...]
});

$('#righty').click(function() {
    state = (state >= maxState) ? 0 : state + 1;
    // [...]
});

当我试用您的菜单时，我还注意到如果七个菜单项中有六个可见，则只有两种不同的状态(而不是七个)。如果您知道菜单的宽度和每个菜单项的宽度，则可以计算出实际不同的状态数。