Javascript 或 jQuery 插件或滑动标签头的技巧

Question

<分区>

Answer 1

你可以使用插件，但我不是来找你的。
相反，我将向您展示如何在几行 jQuery 代码中完成它。

您需要设置一个溢出的 UL 元素并为其 scrollLeft 位置设置动画。
跟踪元素是否滚动到最大值的一种方法是在将位置重置为 0 之前计算 (pseudo:)

ULScrollWidth - ULcurrentScrollleftPos === ULwidth ?

给你:

var $navUl = $('nav ul');
$navUl[0].scrollLeft = 0;

$('nav > span').click(function(){
  var x = $navUl[0].scrollWidth - $navUl[0].scrollLeft <= $navUl.innerWidth() ? 0 : "+=100";
  $navUl.animate({scrollLeft : x});
}); 

nav{
  position:relative;
  margin:0 auto;
  width:450px;
}
nav > span{
  position:absolute;
  top:0;
  right:0;
  background:#ddf;
  height:100%;
  line-height:80px;
  width:50px;
  text-align:center;
}
#navi{
  overflow:hidden;
  width:400px;
  padding:0;
  background:#eee;
  white-space:nowrap;
}
#navi li {
  display:inline-block;
  padding:30px;
  border-right:1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul id="navi">
    <li>Home</li>
    <li>About</li>
    <li>Work</li>
    <li>Music</li>
    <li>Behance</li>
    <li>Dribbble</li>
    <li>Linked</li>
    <li>Contact</li>
  </ul>
  <span>&raquo;</span>
</nav>