jQuery实现的滑块滑动导航效果示例

2019-11-19 13:43:21

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery实现的滑块滑动导航效果。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.VeVB.COm jquery滑动导航</title>  <style>    *{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: 0 auto;    }    .nav ul {      background: gray;      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效果才不会无效*/    }    .nav ul li:last-child {      width: 98px;      height: 90%;      position: absolute;      z-index: 50;      left: 5px;      bottom: 0;      top: 0;      margin: auto;      background: rgba(152,206,170,0.5);      border-radius: 5px;    }  </style></head><body><div class="nav">  <ul class="clearfix">    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >幼儿园</a></li>    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >小学</a></li>    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >初中</a></li>    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >高中</a></li>    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >大学</a></li>    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >社会</a></li>    <li class="huadong" id="huaBlock"></li>  </ul></div><script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script><script>  $(function(){    $("ul li:not(:last)").hover(function(){      $("#huaBlock").stop();  //停止正在运行的动画      var curliWidth=$(this).outerWidth(),curleft=$(this).offset().left-$(this).parent().offset().left; //当前li的偏移量减去当前ul的偏移量就是li距离ul的距离      // alert("curleft:"+curleft);      $("#huaBlock").animate({"width":curliWidth,"left":curleft},500);    },function(){      $("#huaBlock").stop();      $("#huaBlock").animate({"width":98,"left": 5},200);    });  });</script></body></html>

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.VeVB.COm/code/HtmlJsRun测试运行效果如下：