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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
实现JavaScript中继承的三种方式
2009/10/16 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
Python中单、双下划线的区别总结
2017/12/01 Python
python 实现识别图片上的数字
2019/07/30 Python
python区分不同数据类型的方法
2019/10/14 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
遗产继承公证书
2014/04/09 职场文书
学习十八大的心得体会
2014/09/01 职场文书
毕业证委托书范文
2014/09/26 职场文书
个人向公司借款协议书
2014/10/09 职场文书
投标邀请书范本
2015/02/02 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
董事会决议范本
2015/07/01 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python