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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery 移除事件的方法
Jun 20 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
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
为Python程序添加图形化界面的教程
2015/04/29 Python
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
使用python模拟高斯分布例子
2019/12/09 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
送给他或她的礼物:FUN.com
2018/08/17 全球购物
科技工作者先进事迹
2014/08/16 职场文书
环卫个人总结
2015/03/03 职场文书
青春雷锋观后感
2015/06/10 职场文书
PyTorch中permute的使用方法
2022/04/26 Python