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实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
生成缩略图
2006/10/09 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
几行js代码实现自适应
2017/02/24 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
django实现分页的方法
2015/05/26 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
python实现各进制转换的总结大全
2017/06/18 Python
python实现简单中文词频统计示例
2017/11/08 Python
python数据封装json格式数据
2018/03/04 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
商务英语专业自荐信
2013/10/14 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
企业计划生育责任书
2015/05/09 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书