Question

你好朋友正试图制作一个向左或向右滑动的菜单栏。如果用户将鼠标悬停在右箭头上，则此导航栏由两个箭头控制，然后导航将从右向左移动直到结束，当它到达最后一个点时，它将停止。当用户将鼠标悬停在左箭头上时导航将从左向右移动并且当其到达最后一点然后它将停止滑动时，将发生同样的事情

我不知道如何将所有东西组合在一起请在这里查看小提琴 http://jsfiddle.net/DdkLS/

HTML

<div class="nav">
  <div class="arrowLeft"><</div>
  <div class="arrowRight">></div>
  <div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Customer</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="#">why us</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Customer</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="#">why us</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Customer</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="#">why us</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Customer</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="#">why us</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Customer</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="#">why us</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Customer</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="#">why us</a></li>
    </ul>
  </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.nav {
    width: 940px;
    margin: 10px auto 0 auto;
    padding: 15px 25px;
    background: #C00;
    position: relative;
}
.nav .arrowLeft {
    position: absolute;
    left: 10px;
    top: 22px;
    cursor: pointer;
}
.nav .arrowRight {
    position: absolute;
    right: 10px;
    top: 22px;
    cursor: pointer;
}
.nav div {
    overflow: hidden;
    position: relative;
    height: 23px;
}
ul {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
}
li {
    float: left;
    list-style: none;
    float: left;
}
li a {
    text-decoration: none;
    color: #fff;
    padding: 8px 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
}

SCRIPT

var leftMove = 0;   
        var rightMove = 0;  
        var leftValue = $('.nav').find('ul').css('left');           
        var rightValue = $('.nav').find('ul').css('right'); 
        var rightNumeric = parseInt(rightValue);
        var leftNumeric = parseInt(leftValue);
        alert(rightNumeric);

    $('.arrowLeft').mouseenter(function(){              
        setInterval(function(){
            if(rightNumeric < 0)
            {
                leftMove = leftMove+10;
                $('.nav ul').animate({left : '-'+leftMove+'px'},1);     

            }
            if(rightNumeric > 0)
            {

                $('.nav ul').css('left','-'+rightNumeric+'px');     

            }
        },1)


        })

        $('.arrowRight').mouseenter(function(){             
        setInterval(function(){
            if(leftNumeric < 0)
            {
                leftMove = leftMove+10;
                $('.nav ul').animate({left : ''+leftMove+'px'},1);      

            }
            if(rightNumeric > 0)
            {

                $('.nav ul').css('left',''+rightNumeric+'px');      

            }
        },1)


        })

请帮帮我们..先谢谢你们.. :)

Answer 1

试试这个：

$('.arrowLeft').mouseenter(function(){
    $('.nav ul').animate({ left: '+=120' }, 400 );
});

$('.arrowRight').mouseenter(function(){
    $('.nav ul').animate({ left: '-=120' }, 400 );
});

注意：您需要在移动left或right之前管理空间，我只是在这里给出一个提示。

这是一个有效的demo

<强>更新

最好使用jQuery插件，看看这个

http://rascarlito.free.fr/hoverscroll/
http://www.smoothdivscroll.com/
http://www.tonylea.com/2011/jquery-horizontal-scrollbars/

希望它可以帮到你！

Answer 2

如果我理解你正在寻找类似的东西 - Example

由于你的ul周围有一个限制宽度包装.nav（宽度= 940px），我们计算它的宽度并将ul移到右边，这个值减去第一个孩子。

  shift = $(wrapper).width() - $(li).first().width();

要向左移动，我们需要将滑块移动实际的ul宽度减去最后一个子宽度。

请注意，我已经更改了ul宽度的css属性（我将其设置为99999px），这是为了确保浮动的lis不会转到另一行。

向左滑动并使用jquery向右滑动

2 个答案: