jQuery-实现滑块滑动导航效果

xyc

    做项目遇到了一个滑块导航的效果，就动手写了一下，分享给大家参考一下，具体代码如下：
   先看下效果，具体滑动效果动手测试一下：


1.HTML 代码：

[HTML] 纯文本查看 复制代码

<div class="nav">
  <ul class="clearfix">
    <li><a href="javascript:void(0)">HTML</a></li>
    <li><a href="javascript:void(0)">CSS</a></li>
    <li><a href="javascript:void(0)">JS</a></li>
    <li><a href="javascript:void(0)">JAVA</a></li>
    <li><a href="javascript:void(0)">C#</a></li>
    <li><a href="javascript:void(0)">PHP</a></li>
    <li id="navSlide"></li>
  </ul>
</div>

2.css样式：

[CSS] 纯文本查看 复制代码

*{margin: 0;padding: 0;box-sizing: border-box;-moz-box-sizing: border-box;}
body {
  font: 16px/20px 'Microsoft yahei,微软雅黑';
  color: #AFBBBB;
}
ul {
  list-style-type: none;
}
ul li {
  float: left;
}
a {
  text-decoration: none;
  color: #AFBBBB;
}
a:hover {
  color: #ffffff;
  cursor: pointer;
}
.clearfix:before,.clearfix:after {
  content:"";
  clear: both;
  display: table;
  height: 0;
  zoom: 1;
  overflow: hidden;
}
.nav {
  width:519px;
  margin: 50px auto;
}
.nav ul {
  background: #0C83F0;
  height: 35px;
  line-height: 35px;
  position: relative;
  padding: 0 5px;
}
.nav ul li {
  position: relative;
  padding: 0 25px;
}
.nav ul li>a {
  position: relative;
  z-index: 100; /*将a元素的z-index设置比li大，这样hover效果才不会无效*/
        color: #fff;
}
   
.nav ul li:last-child {
  width: 98px;
  height: 90%;
  position: absolute;
  z-index: 50;
  left: 5px;
  bottom: 0;
  top: 0;
  margin: auto;
  background: #ddedfd;
  border-radius: 5px;
}

3.js代码：

[JavaScript] 纯文本查看 复制代码

$(function(){
    $("ul li:not(:last)").hover(function(){
      $("#navSlide").stop();  //停止正在运行的动画
      var curliWidth=$(this).outerWidth(),curleft=$(this).offset().left-$(this).parent().offset().left; //当前li的偏移量减去当前ul的偏移量就是li距离ul的距离
      // alert("curleft:"+curleft);
      $("#navSlide").animate({"width":curliWidth,"left":curleft},500);
    },function(){
      $("#navSlide").stop();
      $("#navSlide").animate({"width":98,"left": 5},200);
    });
});

以上就是滑动导航的全部代码了，如需源码，请点击》》 滑块导航.zip (29.74 KB, 下载次数: 5)

2021-6-19 17:31 上传

点击文件名下载附件
滑块导航
阅读权限: 90
下载积分: 金钱 -1