jquery高亮滑动导航菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery高亮滑动导航菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery高亮滑动导航菜单</title>
  <link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>
<body>

<div id="container">

    <ul id="nav">
        <li id="selected"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">More About My Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>



</div>

<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.spasticNav.js"></script>

<script type="text/javascript">
    $('#nav').spasticNav();
</script>
</body>
</html>

JS代码(jquery.spasticNav.js):

(function($){
	$.fn.spasticNav = function(options){
	options = $.extend({
	overlap:20,speed:500,reset:1500,color:'#0b2b61',easing:'easeOutExpo'}
,options);
	return this.each(function(){
	var nav = $(this),currentPageItem = $('#selected',nav),blob,reset;
	$('<li id="blob"></li>').css({
	width:currentPageItem.outerWidth(),height:currentPageItem.outerHeight() + options.overlap,left:currentPageItem.position().left,top:currentPageItem.position().top - options.overlap / 2,backgroundColor:options.color}
).appendTo(this);
	blob = $('#blob',nav);
	$('li:not(#blob)',nav).hover(function(){
	// mouse overclearTimeout(reset);
	blob.animate({
	left:$(this).position().left,width:$(this).width()}
,{
	duration:options.speed,easing:options.easing,queue:false}
);
}
,function(){
	// mouse outreset = setTimeout(function(){
	blob.animate({
	width:currentPageItem.outerWidth(),left:currentPageItem.position().left}
,options.speed)}
,options.reset);
}
);
}
);
	// end each}
;
}
)(jQuery);

CSS代码(style.css):

#container{width:1200px;margin:100px auto;}
ul,li{margin:0;padding:0;}
#blob{background:#0b2b61;border-right:1px solid #0059ec;border-left:1px solid #0059ec;position:absolute;z-index:1;top:0;background:-moz-linear-gradient(top,#0b2b61,#1153c0);background:-webkit-gradient(linear,left top,left bottom,from(#0b2b61),to(#1153c0));-moz-border-radius:4px;-webkit-border-radius:4px;-moz-box-shadow:2px 3px 10px #011331;-webkit-box-shadow:2px 3px 10px #011331;}
#nav{position:relative;background:#292929;float:left;}
#nav li{float:left;list-style:none;border-right:1px solid #4a4a4a;border-left:1px solid black;}
#nav li a{color:#e3e3e3;z-index:2;position:relative;cursor:pointer;float:left;font-size:30px;font-family:helvetica,arial,sans-serif;text-decoration:none;padding:30px 45px;width:100%;}

附件:下载该文件资源,减少时间成本(增值服务)