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


Posted in jQuery onJune 04, 2018

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.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.3water.com/code/HtmlJsRun测试运行效果如下:

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

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 #jQuery
jQuery实现的简单获取索引功能示例
Jun 04 #jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 #jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 #jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 #jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 #jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 #jQuery
You might like
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
Python实现身份证号码解析
2015/09/01 Python
Python实现的堆排序算法示例
2018/04/29 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
python 产生token及token验证的方法
2018/12/26 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
django有哪些好处和优点
2020/09/01 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
竞聘自述材料
2014/08/25 职场文书
离婚协议书标准格式
2014/10/04 职场文书
明确岗位职责
2015/02/14 职场文书
雷锋之歌观后感
2015/06/10 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python