Question

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

我有一个问题，你怎么看，当你按下右箭头一些时，菜单滚动一个空白区域，因为你完成你的动作（设置在maxState变量，总菜单元素）。 / p>

我想让这个行为与众不同：当最后一个元素出现在屏幕上并再次按下右键时，菜单会重置（就像现在当你按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);
    });
});

（你可以看到小提琴中的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;
    // [...]
});

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

在屏幕内部检测div

1 个答案: