jQuery-实现滑块滑动导航效果 - 苏飞论坛

上传

点击文件名下载附件

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);

    });

});

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