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 tip提示插件(实例分享)
Apr 28 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jquery实现简单每周轮换的日历
Sep 10 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中__get()和__set()的用法实例详解
2013/06/04 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
解决Spyder中图片显示太小的问题
2018/04/27 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
django rest framework 自定义返回方式
2020/07/12 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
AJAX都有哪些有点和缺点
2012/11/03 面试题
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
学习两会精神心得范文
2014/03/17 职场文书
《海底世界》教学反思
2014/04/16 职场文书
活动总结格式
2014/08/30 职场文书
2019年工作总结范文
2019/05/21 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS