使用js完成导航栏滑块效果简单阐述

首先是HTML代码这个主要是class的设置：

<div class="site-nav">
	<div class="container">
		<a class="first">数学</a>
		<a>语文</a>
		<a>英语</a>
		<a>物理</a>
		<a>化学</a>
		<div class="nav-marker"></div>
	</div>
</div>

接下来就是css代码，这里主要是对于滑块的position属性的设置。

.navigation {
	float: right;
	font-size: 15px;
}
.navigation a {
	margin-right: 200px;
}
.nav-marker {
	height: 10px;
	background-color: #8f919e;
	position: absolute;
}

最后就是最主要的js代码。

$(document).ready(function() {
	setSlip();
});
var setSlip = function() {
	var navMarker = $(".nav-marker");
	var navCurrent = $(".site-nav a.first");
	navMarker.css("left",navCurrent.position().left);
	$(".site-nav a").mouseenter(function() {	
		navMarker.stop().animate({
                    width: $(this).width(),
			left: $(this).position().left + "px"
		}, 350);
	});
	$(".site-nav a").mouseleave(function() {
		navMarker.stop().animate({
			left: navCurrent.position().left + "px"
		}, 350);
	});

}

mouseenter()函数用来指示鼠标进入元素时的操作，也就是鼠标放上去时的操作。

mouseleave()函数用来指示鼠标离开元素时的操作，也就是鼠标拿开时的操作。

animate()函数执行CSS属性集的自定义动画，也就是让滑块滑动的函数。

stop() 函数用来指示为被选元素停止当前正在运行的动画，也就是滑块到了这里就该停了。

效果图如下：