弹性滑动导航菜单:
2015-12-22 13:17
453 查看
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>实例:jQuery弹性滑动导航菜单</title> <style type="text/css"> body{ font-size:100%; font-family:"Microsoft YaHei","Arial"; background:#fff;} #nav{ position:relative; width:832px; _width:835px; margin:100px auto 0 auto; border-bottom:2px #ddd solid;} #nav .nav-menu{ height:50px;} #nav .nav-menu a{ display:block; float:left; height:50px; padding:0 40px; line-height:50px; color:#666; font-size:16px; text-decoration:none;} #nav .nav-current{ position:absolute; bottom:-2px; height:2px; overflow:hidden; background:#80b600;} </style> <script id="jquery_172" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ (function(){ var $navcur = $(".nav-current"); var $nav = $("#nav"); var current = ".current"; var itemW = $nav.find(current).innerWidth(); //默认当前位置宽度 var defLeftW = $nav.find(current).position().left; //默认当前位置Left值 //添加默认下划线 $navcur.css({width:itemW,left:defLeftW}); //hover事件 $nav.find("a").hover(function(){ var index = $(this).index(); //获取滑过元素索引值 var leftW = $(this).position().left; //获取滑过元素Left值 var currentW = $nav.find("a").eq(index).innerWidth(); //获取滑过元素Width值 $navcur.stop().animate({ left: leftW, width: currentW },300); },function(){ $navcur.stop().animate({ left: defLeftW, width: itemW },300) }) })(); }); </script> </head> <body> <div id="nav"> <div class="nav-menu"> <a href="#" class="current">首页</a> <a href="#">了解我们</a> <a href="#">产品展示</a> <a href="#">服务报价</a> <a href="#">最新消息</a> <a href="#">联系方式</a> </div> <div class="nav-current"></div> </div> </body> </html>
相关文章推荐
- 在android下使用i2c tools
- (转)ASP.NET MVC4 部署错误 Could not load file or assembly
- MySQL5.7更改密码时出现ERROR 1054 (42S22): Unknown column 'password' in 'field list'
- 技术人员如何面试
- 技术人员如何面试
- 技术人员如何面试
- eclipse启动无响应,停留在Loading workbench状态
- Facebook将全站视频切换为H5: Flash注定被淘汰
- 技术人员如何面试
- 数组去除重复
- keilC51编译环境的使用
- Objective-C_语言_延展
- 关于iOS中的type encodings 和method encodings
- js模板引擎
- 数据结构录 之 单调队列&单调栈。
- 架构师不可不知的十大可扩展架构
- 架构师不可不知的十大可扩展架构
- 架构师不可不知的十大可扩展架构
- 架构师不可不知的十大可扩展架构
- oracle 查看锁死的表,锁死的进程