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操作css样式
May 15 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery操作动画完整实例分析
Jan 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
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
Django 路由系统URLconf的使用
2018/10/11 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
python实现贪吃蛇双人大战
2020/04/18 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
通知范文怎么写
2015/04/16 职场文书
2015年招生工作总结
2015/05/04 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js