jQuery弹性滑块导航

最新推荐文章于 2025-09-13 11:59:05 发布

weixin_30411997

最新推荐文章于 2025-09-13 11:59:05 发布

阅读量83

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jqy518/p/3495132.html

曾起何时在某网站上看到一弹性滑块导航的效果，瞬间被些效果吸引，开始以为是用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>

转载于:https://www.cnblogs.com/jqy518/p/3495132.html