jQuery弹性滑块导航

曾起何时在某网站上看到一弹性滑块导航的效果，瞬间被些效果吸引，开始以为是用FLASH实现的，但查源代码发现用的是JQuery缓动效果。

今天心血来潮想拿这个效果练练手。也看看这段时间学习JS及jquery的成效。

先看下整体效果。

下面是HTML代码。

<div class="nav">

        	<div class="navLeft">

            	<span class="slideBoxNav"></span>

                <a class="aNav" href="#">Home</a>

                <a class="aNav" href="#">Property</a>

                <a class="aNav" href="#">Products</a>

                <a class="aNav" href="#">News</a>

                <a class="aNav" href="#">About US</a>

                <a class="aNav" href="#">Contact US</a>

               </div>

            <div class="selectBox">

            	<input class ="inputCss" type="text"/>

                <a class="searchButton" href="javascript:void(0);">

                <span class="icon"></span></a>

            </div>

</div>

　　CSS样式：

.nav{ margin:0 auto; width:1000px; height:60px; position:relative; z-index:30;}

.navBox .nav .navLeft{ width:700px;float:left; height:60px; position:absolute;}

.navBox .navLeft .aNav{ display:block; font:16px/60px "微软雅黑"; padding-left:20px; padding-right:20px; color:#666; text-decoration:none; height:60px; float:left;

 }

.navLeft .aNav:hover{ color:#00C2CE;}

.nav .navLeft .slideBoxNav{display:block; background:#004F97; height:60px; position:absolute; width:72px; z-index:-1;}

.navLeft .currentNav{ color:#00C2CE;}

.selectBox{ width:200px; height:30px; padding-top:15px; float:right;}

	.inputCss{

	 	color:#666;

		outline:none;

		 font-size:14px;

		box-sizing: border-box;

	    -moz-box-sizing: border-box;

		width:150px;

		 height:30px;

		  line-height:30px;

		  border:none;

		   background:#ddd;

		    float:left;

	}

引用JQuery及jquery.eswing.js　

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

<script type="text/javascript" src="js/eswing.js"></script>

JS代码：

//导航滑块JS效果。

//参数说明 index 当前栏目导航索引从0开始。

function navAnimat(index){

	var alist = $(".aNav");

	var j = index;

	alist.eq(j).addClass("currentNav");

	var widthCurrent = alist.eq(j).width()+40;

	var leftCurrent = alist.eq(j).offset().left-$(".navLeft").offset().left;

	//alert(widthCurrent+":"+leftCurrent);

	$(".slideBoxNav").css({left:leftCurrent+"px",width:widthCurrent+"px"});

	for(var i=0; i<alist.length; i++)

	{

		alist.eq(i).mouseover(function(){

			var $this= $(this);

			var sib = $this.siblings(".slideBoxNav");

			var leftp = $this.offset().left-$(this).parent(".navLeft").offset().left;

			var widthp = $this.width()+40;

			alist.removeClass("currentNav");

			sib.stop().animate({ width:widthp+'px',left:leftp+'px'},{duration: 500,easing: "easeOutBack"});	

			//alert(widthp);

		});

		alist.eq(i).mouseout(function(){

			$(this).removeClass("currentNav");

		});

	}

	$(".navLeft").mouseout(function(){

		alist.eq(j).addClass("currentNav");

		$(".slideBoxNav").stop().animate({ width:widthCurrent+'px',left:leftCurrent+'px'},{duration: 500,easing: "easeOutBack"});

	});

}

调用函数：

   <script type="text/javascript">

   	//设置导航当前栏目。

   	navAnimat(3);

   </script>

巴特西

jQuery弹性滑块导航

最新文章

热门文章