写在前面

用简单的另一种方法实现导航栏滑动特效。

代码

.line { float: none; position: absolute; left: 0; height: 3px; width: 0; padding: 0; background-color: #00c1de; bottom: 0px; transition: left 0.2s ease; }

将position设置为absolute，使其成为一个位置独立的li标签。 left设置为0和width设置为0是为了在初始化时隐藏。 bottom为0是为了在其他li标签下浮动。 transition设置过渡动画

<ul class="nav"> <li><a href="#">home</a></li> <li><a href="#">somewhere</a></li> <li><a href="#">somewhere</a></li> <li class="line"></li> </ul>

类为line的li标签充当滑动元素。

$('.nav li:not(".line")').mouseover(function () { len=$(this).width(); left_=$(this).offset().left; $(".line").css({"width":len,"left":left_,"visibility":"visible"}); }).mouseout(function () { $(".line").css({"visibility":"hidden"}); });

$('.nav li:not(".line")')这个选择器选择到除了类为line的li标签以外的其他li标签。 mouseover函数设置鼠标在li标签之上时的动作。len=$(this).width(); 获取到当前li标签的宽度； left_=$(this).offset().left; 获取到当前li标签距离页面左侧的距离； $(".line").css({"width":len,"left":left_,"visibility":"visible"});设置滑动元素的宽度为当前选中li标签的宽度，left属性值为当前li标签的距离页面左侧的距离，从而保证其正好在下方。最后设置当鼠标在li元素上时滑动元素是可见的。 最后，当鼠标离开导航栏时，$(".line").css({"visibility":"hidden"});设置滑动元素隐藏。

代码全文

不粘代码全文了。呵呵。