jQuery实现的滑块滑动导航效果示例
程序员文章站
2022-05-27 08:09:47
本文实例讲述了jquery实现的滑块滑动导航效果。分享给大家供大家参考,具体如下:
本文实例讲述了jquery实现的滑块滑动导航效果。分享给大家供大家参考,具体如下:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>www.jb51.net 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.jb51.net/code/htmljsrun测试运行效果如下:
更多关于jquery相关内容感兴趣的读者可查看本站专题:《jquery切换特效与技巧总结》、《jquery扩展技巧总结》、《jquery常用插件及用法总结》、《jquery拖拽特效与技巧总结》、《jquery常见经典特效汇总》、《jquery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。
上一篇: JS非行间样式获取函数的实例代码
下一篇: jQuery实现的简单对话框拖动功能示例
推荐阅读
-
Android继承ViewGroup实现Scroll滑动效果的方法示例
-
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
-
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
-
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
-
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
-
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
-
jQuery实现简单漂亮的Nav导航菜单效果
-
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】