<!doctype html> <html> <head> <meta charset="utf-8"> <title>导航滑动跟随效果</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <style> * { margin: 0px; padding: 0px; } body { font-size: 12px; min-width: 1200px; } fieldset, img { border: none; } input, select, textarea { font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 100%; outline: none; } li { list-style: none; font-style: normal; } table { border-collapse: collapse; border-spacing: 0; } .nav { height: 60px; background: #dca3a3; position: relative; } .nav li { float: left; height: 60px; } .nav li a { display: block; height: 60px; line-height: 60px; padding: 0 20px; min-width: 100px; text-align: center; font-size: 16px; color: #fff; position: relative; z-index: 10px; text-decoration: none; } .nav li a:hover { text-decoration: none; } .gl { position: absolute; top: 0; left: 0; height: 60px; background: #00bc12; z-index: 9px; width: 140px; } </style> </head> <body> <div class="w_1200" style="padding:0 0 100px 0;position:relative;"> <div class="nav"> <div class="gl"></div> <ul> <li><a href="###">首页</a></li> <li><a href="###">我是导航一</a></li> <li><a href="###">我是导航二</a></li> <li><a href="###">我是导航三</a></li> <li><a href="###">我是导航四</a></li> <li><a href="###">我是导航五</a></li> <li><a href="###">我是导航六</a></li> </ul> </div> </div> <script> $(".nav ul a").each(function() { var hover_a = $(this); var hover_awidth = $(this).innerWidth(); var hover_aleft = hover_a.position().left; $(this).mouseover(function() { $(".gl").stop(); hover_awidth = $(this).innerWidth(); $(".gl").animate({ left: hover_aleft + "px", width: hover_awidth + "px" }, 250); }) $(this).mouseout(function() { $(".gl").stop(); if ($(this).parent().parent().find(".gl_hover").length > 0) { var gl_hover_left = $(this).parent().parent().find(".gl_hover").position().left; hover_awidth = $(this).parent().parent().find(".gl_hover").innerWidth(); $(".gl").animate({ left: gl_hover_left + "px", width: hover_awidth + "px" }, 250); } else { hover_awidth = $(".nav ul a:first").innerWidth(); $(".gl").animate({ left: "0px", width: hover_awidth + "px" }, 250); } }) }) $(".nav ul a").click(function() { $(this).parent().siblings().removeClass("gl_hover"); $(this).parent().addClass("gl_hover"); }) </script> </body> </html>
<!-- 记着多敲多练 -->
